What is the difference between "Css resolution" and " Pixel resolution"
Would you like to know why a @media(max-width: 400px) is applied on a mobile phone that has 1440px / 2960px ? How does it really work ?
I found a site with this information, that the Mobile has 1440x2960 but the Resolution CSS is 360x740. I asked a friend who has Iphone 8 test and the max-width: 400px has been applied. What is the difference between the two? The browser that makes this distinction ?
2 answers
What happens is that the pixel density is not connected to the width of the screen. Look at this picture, notice that I an inch you have amount of different pixels. On a high-density screen you can have up to 3x more pixels in the same space.
The current resolution units for making the media queries according to the documentation W3C are:
- dpi : dots per inch.
- dpcm : points per centimeter.
- dppx : dots per pixel.
See that 1px is no longer 1px :/
Note that due to the
1:96 fixed ratio of CSS in to CSS px,1dppx is equivalent to 96dpi. This corresponds to the default resolution of images displayed in CSS
What the above text means is that 1px CSS is equivalent to 96 dots per inch.
The following
@mediarule uses Media Queries to assign some special style rules to devices that use 2 or more device pixels by CSS px unit :
@media (min-resolution: 2dppx) { ... } /* regra css para telas com 2x a densidade de pixel, 96 x 2 = 192dpi */
Source: https://www.w3.org/TR/css3-values/#resolution
Summary: So what you need to keep in mind is that 400px CSS is different from 400px of the device screen. It's kind of confusing at first, but in case you want a different rule for high density devices use the measures cited above dpi dpcm dppx e não em PX.
E notice that in a monitor comum 1px = 96dpi, and in a modern monitor of type Retina 1px = 192dpi (2 x 96) or more, but it remains 1px, so the rule @media to be in 2dppx for example or something of type.
Tip: this article has an example of How to group Rules @media for common or high density screens: https://css-tricks.com/snippets/css/retina-display-media-query /
This is a simple table with some screen measurements, notice the difference in Pixel Density vs. Display resolution
Image Source where there is also a Pixel density calculator http://kingscalculator.com/en/other-calculators/pixel-density-calculator
Article that can help you better understand this concept: https://juiceboxinteractive.com/blog/a-pixel-is-not-a-pixel-designing-for-a-new-generation-of-mobile-devices/
Note: it seems to me the property -webkit-min-device-pixel-ratio is not standard (non standard)! And the use of it is not recommended! Opt for the units cited above dpi dpcm dppx
While the standard uses
min/max-resolutionfor this, some browsers support the older non-standarddevice-pixel-ratiomedia query
This refers to the image or web quality on your phone,
In S8 the ration is 4 hardware pixel per CSS pixel, 360x740 * 4 = 1440x2960
In CSS it would look like this:
@media (-webkit-min-device-pixel-ratio: 4) {}
In a nutshell will display in 360x740 but with a 4x superior quality.