Responsive design: Understanding device pixels, css pixels, and screen resolution

Overview

The terms screen resolution, device pixels (device-width), and css pixels (width) are interchangeable in very many contexts, but are therefore easy to confuse where there is a difference. In fact, they are different concepts.

Screen resolution and device pixels are physical concepts, while CSS pixels are the concept of Web programming, and the difference between screen resolution and device pixels is the device pixel display density.

When the device screen zoom=100%, the browser CSS pixel size and device pixels are equal, and when the pixel density (pixel density) is 1, the screen resolution and device pixels are equal.

Responsive design

In responsive design, the concepts of Viewport,device-width,media query,width are used. Web program apes need to understand precisely the nuances of the difference.

Media query detects the screen size, device-width the screen width in device pixels, and Width calculates the total page width in css pixels (in the iphone. Minimum is 980px).

Viewport refers to a region in which a browser calculates an element's size by its width ratio, which is usually larger than the screen.

For example, the following meta tags. will make the viewport area adaptable to the device pixel width (typically 320px in iphone).

<meta name= "viewport" width= "Device-width" >

The page looks like this (using a larger CSS pixel width when calculating the element size) before using the META tag, as an example of IPhone5 on the Web:

This is obviously due to the problem of compressing the 640px content onto a 320px physical screen.

When a meta tag is added, it becomes as normal as the following (device pixels are used when calculating element dimensions):

A special case of iPhone4

Apple iPhone4 a new display technology. Claim 640px resolution, but it is important to note that the pixel width of the device is still 320px.

Some devices return the screen resolution instead of the device pixel width when media query, which causes inconsistencies in the design of the Web page.

Solutions and Dips

Google introduced a dips (device-independent pixels) concept, web developers only need to deal with dips, how much content the screen can display, without concern about the actual screen resolution, this is a good technical direction, will help eliminate the confusion that new hardware display technology brings to media query programming.

by Iefreer

Responsive design: Understanding device pixels, css pixels, and screen resolution