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:600p

Solution 1:

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

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

Solution 2:

I believe, you need to read this...

and even more, when it comes to scalling and Pixel Game, read A Pixel Is not Pixel

As an excerpt / Point to Ponder

For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen

also,

However, there are two tricky bits: the device-width media query and the width="device-width"> tag. Both work with device pixels, and not with CSS pixels, because they report on the context of the web page, and not on its inner CSS workings.