How do device screen resolutions scale in CSS?


Tags: html,css

Problem :

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?"



Solution :

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.

What now?

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.

Further reading


    CSS Howto..

    CSS DIV as table - how to make all column same height as the highest

    How do I make my React Components to be responsive via css media queries?

    How to make the opacity layer same size as img

    How to use conditional CSS for IE browser in drupal6?

    How can I float two tables next to each other left to right and center them both?

    How do I prevent sliced images in the CSS background from sitting on each other?

    How to use SASS logic within a CSS 3 media query [duplicate]

    JavaFX How to change color of dialog/window title?

    How to add a twitter-bootstrap icon as a CSS background-image?

    How to match a comment node with the Jsoup selector api?

    How would I go about having placeholder divs that are then “overwritten” later with PHP?

    How to change the width of an HTML upload field with CSS?

    How to put a div at left or right in pure CSS?

    How to add CSS tag to ruby on rail loop?

    How to change the opacity of image on hover using css

    How to keep indent in lists with CSS?

    How to exclude leading hyphens from justification in dialogue lines using CSS + HTML?

    How to keep CSS from render-blocking my website?

    Flexbox used for equal height, however it is ignoring column width in grid system

    How to generate ABBAABBA… sequence with PHP and CSS nth-child

    How To Create A Responsive Horizontal Layout Using CSS?

    I have a standard table with text inside. How do I vertical align this?

    How can I add a consistent left margin to a checkbox label?

    CSS selector: how to style items [1-2][5-6][9-10] etc by pair

    How to override HTML image using CSS

    How to target content through css

    I've tried using vertical-align and color in static_nav div but it didn't work. Is this because its inside of the header? how would I fix this?

    how to make triangle in css [closed]

    How to use css linear gradients in IE10?

    How to cut divs both ways to keep the objects in center?