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

Overview

Screen resolution, device pixels, and CSS pixels these terms, which are interchangeable in very many contexts, are therefore easy to confuse where there are differences, 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 a responsive design, the Viewport,device-width,media query,width concepts are used, and the Web-application ape needs to understand the nuances accurately.

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

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.

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

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

Before the META tag is used, the page looks like this (using a larger CSS pixel width when calculating the element size):

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

A special case of iPhone4

Apple iPhone4 A new display technology, claiming 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