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..

    How Do I Perfectly Center a Float Element in Between Two Floated Elements?

    How to test .css file for syntax errors?

    Wordpress - Harvard Gazette - How did they do X? [closed]

    How to float Dojo DropDownMenu over a table cell

    How to create a darker background on a whole page with one new div

    How can I create a DIV that scrolls with the browser's scroll bar, that contains flexible content

    How to remove underline in css for anchors pseudo element in IE

    Bootstrap: How to obtain plain border in input field?

    How to write css for specific div selection like before after

    How to select text, but not images, in CSS

    how do I get plus sign in rectangle in css?

    How to change width of

    How to add CSS class to CQ dialog box

    How to set gulp autoprefixer that it will be prefix css when I save my project

    How to reposition my jQuery popup?

    How could i center unordered lists in a footer?

    How to use CSS grid framework for custom widths and gutters?

    How to make this slider more fluid?

    How to enlarge an image horizontally in css?

    How to change the included CSS files on button click?

    How to disable selection with specific class with js/css?

    How to make text blink on website? [duplicate]

    How to use CSS sprites in table sorting headers?

    How to change content of a div after link click using CSS :target?

    Animate css depending on mouse movement [how can I improve]

    How can I get my coloured Bootstrap popover to render properly?

    how can I make div have auto height according to content

    How to remove the border around the image?

    How to position an element at the TOP LEFT corner of a page using CSS?

    How can I edit adjacent selector to a nested one