Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you an example analysis of the use of Viewport tags and related CSS in HTML5 mobile development. The article is rich in content and analyzes and describes it from a professional point of view. I hope you can get something after reading this article.

The viewport (viewport) that is often said in the mobile front end is the screen area where the browser displays the content of the page. Several important concepts involved are the relationship between dip (logical pixels of device-independent pixel devices) and CSS pixels. First of all, we will understand the following concepts.

Layout viewport (layout Viewport)

In general, browsers of mobile devices set a viewport meta tag by default and define a virtual layout viewport (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 page on pc can basically be rendered on the mobile phone, but the element looks very small, and the web page can be scaled manually by default.

Visual viewport (visual viewports) and physical pixels

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, devices with high pixel density, there will be more hardware pixels. For example, physical pixels of iPhone:

IPhone5: 640 * 1136

IPhone6:750 * 1334

IPhone6 Plus:1242 * 2208

Ideal viewport (ideal viewport) and dip (device logical pixels)

Ideal viewport (ideal viewport) is usually what we call screen resolution.

Dip (device logical pixels) is independent of the hardware pixels of the device. An dip occupies the same space on a device screen of any pixel density.

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

Logical pixel width * magnification = physical pixel width

On the other hand, the resolution cannot be set on the mobile phone screen, which is generally the fixed value set by the device manufacturer by default. In other words, the value of dip is the value of ideal viewport (ideal viewport) (that is, resolution), for example, the screen resolution of iPhone:

IPhone5: resolution 320 * 568, physical pixels 640 * 1136

IPhone6: resolution 375x667and physical pixels 750x1334x

IPhone6 Plus: resolution 414 * 736, physical pixels 1242 * 2208, (note that the actual display image ratio is reduced to 1080 × 1920, the specific reasons will be introduced at the end of the article)

CSS pixel

CSS pixels (px) the unit used for page layout. The pixel dimensions of the style (for example, width: 100px) are 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 scaled, a CSS pixel corresponds to a dip (device logical pixel).

Use viewport meta tags to control layout

First, take a look at the viewport meta tag and its attributes:

CSS Code copies content to the clipboard

Here is a detailed description of each attribute:

Attribute names describe the width of viewports defined by width positive integers or device-width, in pixels height positive integers or device-height defines the height of viewports in pixels, generally without initial-scale [0.0-10.0] definition initial scaling value minimum-scale [0.0-10.0] defines the minimum zoom scale, it must be less than or equal to the maximum-scale setting maximum-scale [0.0-10.0] define the maximum magnification It must be greater than or equal to minimum-scale setting user-scalableyes/no to define whether to allow users to manually zoom the page. The default is yes.

Width

The width property is used to control the width of layout viewport (layout viewports), and the default value of layout viewport (layout viewports) width is specified by the device manufacturer. IOS and Android basically set the viewport resolution to 980px. We can set width=320 to the exact number of pixels, or to the special value of device-width. Generally, in order to adapt the layout, it is common to set width to device-width, for example:

CSS Code copies content to the clipboard

Width=device-width sets the width of the layout viewport (layout viewport) to the width of the ideal viewport (ideal viewport). When the scale of the web page is 100%, one CSS pixel corresponds to a dip (device logical pixel), while the width of layout viewport (layout viewport), the width of ideal viewport (ideal viewport) (commonly known as resolution), and the width of dip are equal.

Height

Similar to width, but not commonly used in practice.

Initial-scale

Initial-scale is used to specify the initial scale of the page:

CSS Code copies content to the clipboard

Initial-scale=1 sets the width of layout viewport (layout viewport) to the width of ideal viewport (ideal viewport), and initial-scale=1.5 sets the width of layout viewport (layout viewport) to 1.5 times the width of ideal viewport (ideal viewport).

Maximum-scale

Maximum-scale is used to specify the maximum scale that a user can zoom in, such as

CSS Code copies content to the clipboard

Assuming that the default scaling value initial-scale for the page is 1, the user will eventually be able to zoom in to three times the initial page size.

Minimum-scale

Similar to the description of maximum-scale, but minimum-scale is used to specify the size of the page. In general, the value of this property is not defined, and the page is too small to read.

User-scalable

User-scalable controls whether the user can zoom the page through gestures. The default value of this property is yes, which can be scaled, or you can set this value to no to indicate that users are not allowed to zoom the page. For example:

CSS Code copies content to the clipboard

PS: about the screen resolution of iPhone

IPhone 6 Plus officially says that the screen is 1920 x 1080, but in Xcode we find that the simulator's screen actually looks like a strange 2208 x 1242. Why?

How does this 17% reduction come from? Let's take a look at the answer on Stack Overflow: iPhone 6 Plus resolution confusion: Xcode or Apple's website? to put it simply, the magnification of the cut image and the actual rendered pixels are positive integers.

The above is an example of the use of Viewport tags and related CSS in HTML5 mobile development shared by Xiaobian. If you happen to have similar doubts, please refer to the above analysis for understanding. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.