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

Overview

The terms screen resolution, device pixels (device-width), and css pixels (width) are in very many contexts. are interchangeable, but so easy can cause confusion in different places, in fact they are distinct 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 using the META tag, take the net on IPhone5 for example. The page will look like this (using a larger CSS pixel width when calculating the element size):

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 has introduced an intermediate concept of dips (device-independent pixels), and web developers simply need to deal with dips. It is a good technical direction to see how much content the screen can display without worrying about the actual screen resolution. 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