Today, i discovered The resolution CSS data types and i don't find a real usage for this. Has anyone ever used this functionality or any examples use case ?
One real-world example usage is when performing printing of web document:
#media print and (min-resolution: 300dpi) { ... }
The above media query will display given styles when printing DPI is set at minimum of 300dpi.
If you have some content that requires at least 300dpi (artist / photographer etc.) you could require the viewer to have at least a 300dpi screen. If the viewer does not, you can put out a message saying they don't have a screen with high enough pixel density to view the content.
Imagine you’re displaying images, via CSS, in a same-sized element:
.my-image {
background-image: url(path/to/image.jpg);
/* Exact dimensions of image */
height: 200px;
width: 200px;
}
This will look fabulous until you see this on a higher DPI screen. Incidentally, many smartphones and tablets do have higher DPI screens. With a media query, you can serve higher quality images.
#media (min-resolution: 72dpi) {
.my-image {
background-image: url(path/to/image-large.jpg);
}
}
Basically progressive enhancement. Users with lower DPI screens will run at you, hold you in their arms, and thank you for saving precious bandwidth.
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 am building a SPA. I have
in index.html, and I've got a few media queries such as:
#media screen and (min-width: 640px){
.sidebar {
width: 20%;
float: left;
}
}
When I open the site in Firefox, I'm shown a selection of device sizes, and when I choose the smaller sizes, the RWD shows up. The sidebar slides down, images are smaller, etc. All great. The problem is when I open the site on a mobile phone (android), it's as if I haven't done any of that. Google doesn't recognize the RWD changes either. Am I missing something?
Keep in mind that resolution on phones is getting so ridiculous that old-style media queries are basically useless for determining device. Of course, my 5-inch phone doesn't actually have 2560 pixels on its screen, but it uses a "device pixel ratio" to treat each logical pixel as 2, 3, 4 or even more pixels.
So, accordingly, we can target that metric to determine devices. Try changing your media query to something like this:
#media screen and (min-device-width: 640px){
.sidebar {
width: 20%;
float: left;
}
}
To target mobiles and devices and basically everything properly use this media query:
#media handheld,screen and (min-width:600px){}
I would also personally use max-width over min-width it makes more sense on downsizing and code grouping but that's probably my personal preference.
The #media screen bit does work - however the host I was using wasn't allowing it. I've since moved my website, and it's mobile friendly. Just thought I'd leave this here in case anyone else runs into this problem. The hosting was previously done through my school, so I don't have a lot of info to share about it.
Moving to a proper host (godaddy, although I don't actually recommend it, since they don't have any server side scripting) fixed the problem without any other changes being made.
google says "because css pixel ratio" but I can't figure out what that is, or why it exists.
Why am I adding metadata that tells the browser to render the screen at <2/3rd the screen's resolution? Images (as far as I can tell) don't get resized, so why is everything else? and why this so common?? wts is going on??
You need to understand why you are adding certain codes into your file. You said you have <meta name="viewport" content="initial-scale=1"> in your code. What initial-scale means is, upon page load, the page will be viewed at 100% zoom level. It's not about filling 1 CSS pixel to 1 hardware pixel. It's about filling 1 CSS pixel to 1 device-independent pixel.
As defined in Google's developer reference:
Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should be approximately the same size on all devices. An iPhone 5 is 320 dips wide.
Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.
Are the hardware pixels on your phone different from those on your PC monitor? Yes, they are different in terms of size (pixel density). Assuming your 21" monitor and 5" phone screens both have 1920px x 1080px screens, so obviously the pixel density is much higher on the phone's screen (and much smaller pixels) and it would not be wise to show up the webpage using the ratio of 1 CSS pixel to 1 hardware pixel since everything will be too small on the phone screen.
So what if you don't want responsive website design, but to fit the whole page into the small screen like what you see on a PC monitor? All you need to do is to remove the <meta name="viewport" content="width=device-width, initial-scale=1"> line and browsers will automatically fit the page onto the screen by default, by zooming out (i.e. initial scale will not be 1). Developers only add this line of code if the website needs to be responsive, and has the relevant CSS media queries for that.
While Billy's post did answer the question, and it does a good job of describing the general mechanism, the question did rise how to set the webpage to full screen in browsers that don't zoom out all the way by default. That is, use every pixel on a 1920×1080 screen as if it was a 1920×1080 desktop monitor.
Well, unfortunately there is no failsafe way to do that, but you can get close if you include some device specific #media queries.
html, body {margin:0; width:1920px; height:1080px; font-size:16px;}
#media (-webkit-min-device-pixel-ratio:1.5) { body {zoom:.66666667} }
#media (min-device-pixel-ratio:1.5) { body {zoom:.66666667} }
#media (min-resolution:1.5dppx) { body {zoom:.66666667} }
#media (-webkit-min-device-pixel-ratio:2) { body {zoom:.5} }
#media (min-device-pixel-ratio:2) { body {zoom:.5} }
#media (min-resolution:2dppx) { body {zoom:.5} }
#media (-webkit-min-device-pixel-ratio:3) { body {zoom:.33333333} }
#media (min-device-pixel-ratio:3) { body {zoom:.33333333} }
#media (min-resolution:3dppx) { body {zoom:.33333333} }
#media (-webkit-min-device-pixel-ratio:4) { body {zoom:.25} }
#media (min-device-pixel-ratio:4) { body {zoom:.25} }
#media (min-resolution:4dppx) { body {zoom:.25} }
This will (attempt to) zoom the scale of the page so that the number of CSS pixels is the same as the number of hardware pixels.
Of course if you take this approach, note that you will have to add new media queries with higher resolutions as time progresses.
And it will fail on devices that are not 1920×1080 pixels.
A better approach would be to not contemplate the hardware resolution at all, but just work with what you have. Don't use pixels, use percentages or vw and vh for measurements. 50vw, not 960px, is the horizontal centre of the screen. That way, your webpage wil display correctly on any device, no matter its characteristics. No scrolling or pinching needed!
You may find you have to differentiate between landscape and portrait modes with #media queries, but that depends on the contents of the page.
I've been looking at a few websites, in order to construct my own websites, and I've noticed that when you zoom in past a certain percentage, the website emulates a mobile display. No horizontal scrollbar appears, and everything fits onto the page, and only the page length increases.
Here are a few example websites - https://generalassemb.ly/, http://learnlayout.com/, http://dev.opera.com/
I'm not sure how they implement this is their design, and have searched the web for an explanation.
If possible, could you walk me through it with example CSS?
Thanks
This has nothing to do with the zoom, but with the current width of the window, ( At least in your examples, the same happens when you change your browser's window to a smaller size ) they are most likely using CSS media queries to apply conditional styles depending on the width.
Sample ( from first google result http://css-tricks.com/css-media-queries/ )
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
body {
background: #ccc;
}
}
Is there any way to progressively resize using media queries rather than at pre-determined widths? E.g.
Currently I have something like:
#media screen and (max-width: 1024px) { }
Now this will ONLY resize when the window hits that magical 1024px boundary... however, I need it to resize at every stage, not just 1024px.
If the user makes the window 10% narrower then the images and font sizes also need to reduce by 10%.
Is this possible with media queries or am I going to have to go down the JS route for this?
Thanks.
Just make the entire layout flexible. You could then resize the images using width: 90%; (or any value you like), Or use max-width:90%; if you don't want the image to upscale.
Gradually resizing the text is not possible using media queries or css, but you really shouldn't do that. People with smaller windows wouldn't be able to read the text, and people with big screens will have to sit back because the text is to big. Not to mention people using a mobile phone.
Yes, you can do progressively resize using vw, and vh. Do take note of the browser support though.
.h1 {
font-size: 50vw;
}