The picture pretty much explains the problem.
On mobile phones, my clean/crisp repeating background (position center bottom, repeat-x) looks like crap. It doesn't actually appear that large on the phone - it looks visually the same size as on a computer, but - I assume since the phone is a higher resolution, it's making it look pixelated and choppy.
I can't believe I've never come across this issue before, but searches for the subject just turn up "how to make repeating backgrounds on mobile" or "how to do full-screen backgrounds on mobile"...etc.
How can I make a background image that will look clean/crisp/good on both mobile and computer?
I tried making the image 200dpi instead of 72dpi, but - no luck.
Whilst the optimal solution is SVG, the easiest way to do this is using pixel-density media queries.
e.g.
.container {
background-image: url('images/bg.jpg');
}
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
.container {
background-image: url('images/bg-2x.jpg');
}
}
If you are using preprocessors this becomes even easier as you can create mixins for different breakpoints including pixel densities.
Related
Why I am asking this question?
I don't want to create so many media queries for really big screens.
If the screen size is bigger than 1920px, all the existing proportions should remain the same, and the appearance should be simply bigger in dependence on screen width.
What I need is something like that:
// PSEUDO CODE!
#media screen and (min-width: 1921px) {
.content-block {
zoom: calc (100vw divided by X) // <- HERE
}
}
Example:
X = 15
Screen width = 4000px
Zoom-factor = 400 / 15 ~ 266%
X is just any magic number.
Someone might think that if 1900 is 100%, maybe 19.2 might be a better fit, but I've tried out many numbers; 15 fits very well in my current case. If the screen width is, for example, 4000px, I need a zoom of 266%. The choice of the X shall not be confusing here.
The scaling only starts from 1921px according to the set media-query, but that is also a secondary issue.
It is primarily about determining a dynamic zoom factor, which changes depending on the resolution (also on the current window width, therefore 100vw, not 100%), without creating tons of media queries.
Final Notes:
I've already started a bounty once. The given answer is wrong. I don't know why people upvote it. If you click on "run code snipped" and open the result in a new window and resize the window, you will see, it does not work when you resize the window.
In the desired solution, the zoom factor should continuously change while you resize the window.
Last but not least:
No JavaScript, please, CSS solutions only. It is enough if it works in Chrome and Edge of Today.
Something like this could work (you may have to juggle a bit with the numbers to get the intended result):
#media screen and (min-width: 1290px) {
.content-block {
zoom: calc((100% / 15) * 100)
}
}
<div class="content-block">
alalala
</div>
Notes
I used a lower screen breakpoint so I can test it with my display (I don't have a 4k display)
It has one caveat of calculating with the width of the parent, but if you use body for the calculation, it might just work.
expand the snippet so you can see the difference.
Update
However, a better solution would be to set a root em of a given size (which approximates 10 px) and increase this value above a specific screen size using media queries. It's also important to use rem as measurement unit everywhere in your stylesheets (instead of em, px).
Linked question: How to set base size for rem
It is primarily about determining a dynamic zoom factor, which changes depending on the resolution [...] No
JavaScript, please, CSS solutions only.
This in itself would be possible, though one statement of your question limits the solutions tremendously: "I don't want to create so many media queries for really big screens.". Unfortunately, without the usage of lots of media queries this won't be solvable.
Let me elaborate on this bold statement. You can't get the screen width and/or height with CSS only (cf. this). The only possibility you have is to use #media queries - they were invented for exactly this purpose, i.e. your CSS should be displayed in a certain way if width is equal or less than 1200px would be written like that:
#media (max-width: 1200px) {
/* Specific CSS for 0px <= width <= 1200 */
}
If you accepted JavaScript, we obviously would be able to grasp the current width and height via $(window).width(), respectively $(window).height() or even the screen width and height via screen.width and screen.height (click here for an example). But as you specifically mentioned not to include JS, I'll go more in-depth into a CSS solution:
That out of the way, we now know we can't get the screen dimensions with CSS only, hence we're not able to dynamically solve this due to inability of calculating the "magic X factor". What are we able to do then? Well, as mentioned above #media queries were specifically designed for such a use case!
#media is available on nearly all modern browser, see here for the graph:
With #media we could build a logic similar to this:
#media all and (max-width: 2559px), (min-width: 1920px) {
/* specific CSS for this screen size */
}
#media all and (max-width: 3839px), (min-width: 2560px) {
/* specific CSS for this screen size */
}
Obviously, you could custom fit your #media queries in a way so your "dynamic" zoom still looks flawless. In my example I took the sizes for a WQHD and UHD resolution into consideration, hence the first CSS will be execute if it's 1440p, the second one if it's 4k (here is a list of common monitor/TV resolutions).
Obviously, using too many #media queries will be a disadvantage - performance-wise and from a maintainability point of view. I'd love to give you a better solution, but going with the strict rules you have enforced upon this question, it's hard to suggest anything aside the function originally developed to achieve such a goal. If you still want to go with CSS-only, may take a look at this GitHub repo - it helps to keep the #media queries more sorted.
Last but not least, I thought of going into detail regarding the zoom factor, but it seems like you got that under control (judging by your specific examples - in your case, you'd need to calculate your X value for each #media query you decide to implement in the end).
Besides the links mentioned above, I suggest the following for further reading purposes:
A general revision about viewport lengths
Regarding zoom/scale (especially if you decide to go with JS)
Documentation about CSS3 Media Queries, very useful!
Another tutorial about #media
I don't think that the zoom factor can be calculated via CSS in any way.
You can, however, get a similar result using a 3d construct.
In the snippet, a div that has a width of 400px is zoomed to full width adjusting the transform of the body.
(You need to set the snippet to "full page" to see it working.
div {
width: 395px;
background-color: tomato;
border: solid 1px black;
}
body {
transform: perspective(100vw) translateZ(calc(100vw - 400px));
transform-origin: left center;
}
<div>Test</div>
do you have complete control of this website? Here is what I suggest:
For true resolution independence you need to forget about pixels.
Forget about zoom too, that's a non-standard feature.
Go to the base of your DOM and define the font-size with vw, like:
body {font-size:1.2vw;}
Then define all other sizes in em (not rem because that stays constant), ie like:
img {width:20em; height:auto;}
Then you can code exceptions for layouts based on the aspect ratio of the viewport.
/* the only use of px is to isolate the mobile version */
#media screen and (orientation: portrait) and (min-width: 981px) {body {font-size:2vw;}}
#media screen and (orientation: landscape) and (min-width: 981px) {body {font-size:1.2vw;}}
#media screen and (max-width: 981px) {body {font-size:4vw;}}
You can also consider isolating layouts for custom aspect ratios by replacing the portrait/landscape keywords with aspect ratios, as described here:
https://developer.mozilla.org/en-US/docs/Web/CSS/#media/aspect-ratio
You can see this strategy in action on this website I made:
https://bludumpsterrental.com/
I've designed a dashboard for my site that on my screen looks fairly nice. My resolution is 1920x1080 at 100% zoom. My dashboard looks awful on my coworkers computer because he is at 3200x1200 at 300% zoom. Another coworker is 1280x720 at 150% zoom. I'm having difficulties figuring out how to account for all of these drastically different screen sizes.
I have been using media queries and a grid system to move certain components around based on the screen size, but I feel like I'm not correctly understanding the best way to deal with a vast range of screen sizes. I'm also having a difficult time even testing how my dashboard would look on certain screens because I can't set my resolution to 3200x1200 at 300% zoom.
What I would like to have happen is essentially set up break points for if the screen is a tablet size or smaller to rework the order of my components, but for anything above that, just essentially have the screen sort of shrink so the layout looks the same for every laptop.
To implement this I have tried things like this:
`#media (min-width: 1400px) {
.dashboard {
zoom:70%;
}
}
`
but I've heard using zoom isn't smart for production sites because it doesn't work on all browsers. I have also tried using webkit and transform, but while that shrinks that dashboard, it also shrinks the overall width and height so it no longer covers the container.
This may be tagged as a repeat question, but the only things I found similar were from 8 years ago and the methods were completely different.
I'm currently making a webpage and testing it in chrome works fine, but in Firefox - it is zoomed in.
This is because my DPI in Windows is set to 125%, and Firefox detects this, and adjusts every webpage accordingly.
However, my webpage is not meant to be viewed at such a zoom level, the images aren't made to be displayed that big, and hence it looked blurred/pixelated. The general layout of the page is messed up too, because everything is so big.
Now, this doesn't affect most people - as their DPI would be at 100% in Windows. However, I want it to be the same on all browsers.
I've searched and have found solutions as for the user to disable this "feature" - but I want to be able to disable it from my website - so it doesn't look wrong to the user in the first place.
e.g. one post says:
1) Type about:config in address bar
2) search for layout.css.devPixelsPerPx
3) change value of layout.css.devPixelsPerPx from -1.0 to 1.0
But that isn't what I'm looking for.
Is there any way to disable this from CSS/HTML/anything?
Thanks.
You could easily let your website address users with settings at higher zoom levels by including a media query like:
#media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),
only screen and( -o-min-device-pixel-ratio: 5/4 ),
only screen and( min-resolution: 120dpi ),
only screen and( min-resolution: 1.25dppx ) {
body {
font-size: 1rem;
}
}
See this article for an extended explanation and why the cleaned up solution of the media query is sufficient for a broad browser support: IE9+, Fx3.5+, Opera9.5+, Webkit Browsers Chrome and Safari, both Desktop and Mobile.
Your could try something like this below. There are some caveats using this, but for some situations
it is worth using it.
#media screen and (min-resolution: 120dpi) {
/*body {transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;}*/
body {transform: scale(0.8);transform-origin:top left;width: 125%;height: 125%;}
}
Commented /*body....*/ example scale may be easier to understand yet worse, f.e. because
scaling should be done based on transform-origin css rule top left edge. Then things can be rendered better especially in Chrome.
if you use width: 125%, your RWD css should react differently to changing browser sizes on account of this from what you expected when screen ratio was 100%.
And you might reasonably accept this - this is RWD and the difference is 25%. But some people might want to adapt their css like this:
#media screen and (min-width: 1000px)
you also need to adjust:
#media screen and (min-width: 800px)
probably not 1250px but 800px like I did.
Edge, Chrome, FF do pretty good. IE 11 rendered the worst yet not hopelessly.
There are some problems in FF (not edge, chrome) when expanding select fields - solution css select.
Some borders can can be visible some dissapear on FF (maybe not edge, chrome)
There can be some issues not mentioned here like when you use carousel like owlcarousel on your page.
Yet I think it is greater probability to save more time with this example tested still too little.
You have to use exact scaling like 0.8 for 125% screen for your images to be rendered as sharp as possible.
I noticed that when switching to different dpi resolutions using ctrl +/i in a desktop browser and for sure using multitouch gestures in mobile browsers, a browser changes dpi too, so any solution using #media min/max-resolution may not work as expected. What is needed in css is to read system resolution not a browser. However as i see this resolution change doesn't take place like then when someone changes browser size manually or by rotating a mobile device.
Thank you Tatsuyuki Ishi for correcting some errors of my answer.
This frustrated me too, but luckily there is a solution.
Navigate to about:config. (Click accept on any warnings telling you to be careful with advanced features)
Search for layout.css.devPixelsPerPx and change its value to 1.0 and your issue should be fixed.
It was something implemented in Firefox 22.
I did this way, zoom works better than transform, it doesn't make fixed elements absolute:
#media screen and (min-resolution: 120dpi) {
body {zoom: 0.8;}
}
Set it to 1.25: that keeps the user interface larger, but resets the website to 100% pixel mapping.
I am working on a page for my mybb forum and I added some images and I want them to scale with the screen resolution so if I have a 17" it looks the same as someone with a 19" screen. Because right now the images just look all messed up. Here is the page that I am working on. http://crescentgaming.com/forums/test.php
In your CSS, use percents.
HTML
<img src="/folder/whatever.jpg">
CSS
img{
width: 45%;
}
Of course, you could switch it to whatever percent you want. There is a more complicated way with JavaScript, but this usually works (for me).
try the % instead of the px unit
or use #media and specify dimensions for any resolution
#media
CSS #media for standard devices
I hope that will help
PS: under the #media you can specify changes only for certain elements, ID or classes so you don't have to redesign the hole page (as far as I know) so don't be shy to give it a try :)
My idea, assuming you start with a 200x200 sprite (meaning the double resolution image is 400x400) is this:
.sprite {
background-image:url('1x.png');
background-repeat: no-repeat;
background-size: 200px 200px;
}
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.sprite {
background-image:url('2x.png');
}
}
Live example: http://ov3rkill.com/temp/a5dii52/
I've struggled for a while trying to determine the best way to deliver higher resolutions images (previously I kept all images separate and sized them individually) and this frankly seems too simple.
Can anyone see any potential drawbacks? I'm toying with this for production use and so far it appears to work.
Since the media query for retina is being called at load it should override the original call to load the small image.
I've never witnessed the low-res image flashing in when using this method on retina displays.
Has anyone used JS to confirm that the smaller image loads on a retina display? I curious to know.