How do device screen resolutions scale in CSS?
Following are screen resolutions of a couple popular phones:
iPhone 6: 1334 x 750
Samsung Galaxy S5: 1920x1080
In CSS we have media queries like:
@media only screen (max-width:600px)
which is meant for small screens, and the two above phones still respond to this? Clearly their width is much more than
600px. So my question is, how does this scaling occur, if at all it occurs? I have a feeling I'm missing a fundamental concept of CSS here.
EDIT: I understand that
@media screen is actually asking for the window size and not the device resolution. My question could be more appropriately phrased as, "how does the window size scale in phone browsers?"
I was wondering the same a while ago, so I'll summarize what I found. Turned out to be quite the answer, so I hope it helps.
Pixels themselves have become relative. Having a mobile screen with a high pixel density will not mean that you automatically view a large website on a small screen. Pixel density is used to set determine how many pixels the webpage will use.
Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.
So our what does that mean? The CSS pixel has become a grid unit that is decoupled from the actual pixel. And that we should set the pixel density to a value which will make it clear what screen size we're looking on, irrelevant the amount of pixels we actually have. As a web developer, this is why we set the viewport, which sets up the relative grid by dividing the amount of pixels by the pixel density. So a device with 640 pixels width and a 2.0 pixel density will show a 320 pixels wide screen.
There are 2 ways to deal with this. First is to, like I said, set the viewport. But as devices are getting bigger this will lead to a mobile site on screen sizes that might not be intended for the full mobile lay-out.
The other option is to ignore this and start designing responsively. Have two, three or four screen sizes at which you want your lay-out to change and stick to that. Do some research if you have to for certain screen sizes (like: do you want the ipad landscape to be your normal webpage?) and go from there.
Which one is better? I would say setting the viewport, because that allows you to ensure the right content is shown, regardless of the real amount of pixels.
- A (non-exhaustive) list of device pixel ratio's can be found at http://www.devicepixelratio.com/
- Apple device screen sizes at http://stephen.io/mediaqueries/
- A clear article on it can be found on gamon.org.