Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Mobile adaptation

In writing mobile code, pages are mostly not too complex, but the adaptation problem is always a bit more difficult. Here are some specific concepts:

Physical pixel

Take iphone6 as an example, can know:

Resolution:

1334pt x 750pt

This refers to 1334 physical pixels vertically and 750 horizontally on the screen.

Screen size: 4.7in

Note that inches are a unit of length, not area. 4.7 inches refers to the diagonal length of the screen, and 1 inch equals 2.54cm.

Screen pixel density: 326ppi

This refers to the number of pixels per inch of the screen. In a display, Dpi =ppi. Dpi emphasizes points per inch. Also, screen pixel density = resolution/screen size

And then, let’s look at the other units.

Device independent pixels:

Device-independent pixels, unlike device pixels (physical pixels), are virtualized. For example, CSS pixels, when we say 10px, actually mean that. It is important to note that physical pixels are not available to developers, they are something that exists naturally, as many as they can be.

Device pixel ratio:

DPR, for short, is a value we often see at the top of mobile debugging on the Google Console.

Device pixel ratio = Device pixel/CSS pixel (vertical or horizontal). It can be obtained from JS: window.devicepixelRatio

In order to make web pages look good even on small screens, browser manufacturers set the width of the layout viewport to be very large, usually between 768px and 1024px. The most common width is 980px. The width can be through the document. The documentElement. ClientWidth.

<meta name="viewport" content="width=device-width,initial-scale=1" />
Copy the code

Width =device-width sets the layout viewport to the width of the browser (screen).

Initial-scale =1 means that the initial scale is 1, which also sets the layout viewport size to the scaled size. The zoom size is based on the width of the screen, so it has the same effect as width=device-width.

In addition, it is worth mentioning that when we do the media query, the width value of the query is actually the width value of the layout viewport.