Analysis of Viewport tags and related CSS usage in HTML5 mobile development

This article mainly introduces the Viewport tag and related CSS usage analysis in HTML5 mobile development. Viewport is often called a viewport or viewport, and plays an important role in mobile layout and screen adaptation. Friends who need it can refer to it.

The viewport (viewport) commonly mentioned in the mobile front-end is the screen area where the browser displays the page content. Several important concepts involved are the relationship between dip (device-independent pixel device logic pixel) and CSS pixels. Here we first understand the following concepts.

Generally, browsers on mobile devices set a viewport meta tag by default, defining a virtual layout viewport to solve the problem of early page display on mobile phones. iOS and Android basically set the resolution of this viewport to 980px, so the web pages on the PC can basically be presented on the phone, but the elements look very small, and the web pages can generally be manually scaled by default.

Visual viewport (visual viewport) provides the visual area of ​​the physical screen, the physical pixels of the screen display, the same size of the screen, the device with high pixel density, and the hardware pixels will be more. For example, the physical pixels of the iPhone:

iPhone5: 640 * 1136

iPhone 6: 750 * 1334

iPhone6 ​​Plus: 1242 * 2208

Ideal viewport and dip (device logic pixels)

ideal viewport is usually what we call screen resolution.

dip (device logic pixel) has nothing to do with the hardware pixel of the device. A dip takes up the same space on a device screen of any pixel density.

For example, the hardware pixels of the Retina screen display of MacBook Pro are: 2880 * 1800. When you set the screen resolution to 1920 * 1200, the width value of the ideal viewport is 1920 pixels, and the width value of the dip is 1920. The device pixel ratio is 1.5 (2880/1920). The relationship between the logical pixel width and the physical pixel width (pixel resolution) of the device satisfies the following formula:

The resolution of the mobile phone screen is usually not allowed. It is generally a fixed value set by the device manufacturer by default. In other words, the value of dip is the value of ideal viewport (i.e. resolution). For example, the screen resolution of the iPhone:

iPhone5: resolution 320*568, physical pixels 640*1136, @2x

iPhone6: Resolution 375*667, Physical pixels 750*1334, @2x

iPhone6 ​​Plus: resolution 414 * 736, physical pixels 1242 * 2208, @3x, (Note that the actual displayed image ratio is reduced to 1080×1920, the specific reasons will be introduced at the end of our article)

CSS pixels (px) units used for page layout. The pixel size of the style (for example width: 100px) is specified in CSS pixels. The ratio of CSS pixels to dip is the scaling ratio of the web page. If the web page is not scaling, then a CSS pixel corresponds to a dip (device logic pixel).

Use viewport meta tag to control layout

First, let’s take a look at the extreme properties of the viewport meta tag: