How to scale device screen in CSS?
Below are the screen resolutions of a couple of popular phones:
iPhone 6: 1334 x 750
Samsung Galaxy S5: 1920x1080
CSS has media queries like:
@media only screen (max-width:600px)
which is for small screens and the aforementioned two phones still respond to this? It is clear that their width is much greater than 600px
. So my question is, how does this scaling happen, if it happens at all? I have a feeling that I am missing a fundamental concept of CSS.
EDIT: I understand what is @media screen
really asking for window size, not device resolution. My question might be phrased more correctly like this: "What is the size of the window scale in phone browsers?"
source to share
I was wondering the same time ago, so I'll summarize what I found. It turned out that this is the answer, so I hope this helps.
The pixels themselves have become relative. Having a high pixel density mobile screen does not mean that you are automatically viewing a large website on a small screen. Pixel density is used to determine how many pixels a web page will use.
Pixel units refer to the resolution of the viewing device, that is, most often to the computer. If the pixel density of the output device is very different from the image density of a typical computer display, the user agent must scale the pixel values.
So what does this mean? The CSS pixel has become a grid that is separate from the actual pixel. And that we have to set the pixel density to a value that will make it clear what screen size we are looking at, it doesn't matter how many pixels we actually have. As a web developer, so we set a viewport, which sets the relative grid by dividing the number of pixels by the pixel density. Thus, a device with a width of 640 pixels and a density of 2.0 pixels will display a screen that is 320 pixels wide.
Now what?
There are two ways to handle this. First, as I said, you need to set the viewport. But as the number of devices increases, this will result in a mobile site with screen sizes that may not be designed to fit fully mobile devices.
Another option is to ignore it and start reacting constructively. You have two, three, or four screen sizes that you want your layout to change and stick to. Do some research if you want specific screen sizes (ex: do you want the ipad landscape to be your regular webpage?) And go from there.
Which one is better? I would say setting the viewport because it makes sure that the correct content is displayed regardless of the actual number of pixels.
Further reading
- A (non-exhaustive) list of device pixel ratios can be found at http://www.devicepixelratio.com/
- Apple device screen sizes at http://stephen.io/mediaqueries/
- An excellent article about it can be found at gamon.org .
source to share
I believe you need to read this ...
and even more when it comes to scalling and Pixel Game, read Pixel Not Pixel
As an excerpt / point for reflection
For pages that set the initial or maximum scale, this means that the width property actually translates to the minimum width of the viewport. For example, if your layout needs to be at least 500px wide, then you can use the following markup. When the screen is more than 500px, the browser will expand the viewport (rather than zoom in) to set the screen
and
However, there are two tricky bits: asking for media device width and width = "device-width">. Both work with device pixels, not CSS pixels, as they communicate the context of a web page and not its internal CSS work.
source to share