Analysis of Viewport labels and CSS usage in HTML5 mobile development, html5viewport

Analysis of Viewport labels and CSS usage in HTML5 mobile development, html5viewport

The viewport, which is often used in mobile front-end, is the area on which the browser displays the page content. Several important concepts are involved in the relationship between dip (device-independent pixel device logical pixel) and CSS pixel. Here, we will first understand the following concepts.

Layout viewport)

Generally, mobile browsers have a viewport meta tag by default, defining a virtual layout viewport, which is used to solve the problem of early page display on mobile phones. For iOS and Android, the resolution of the viewport is basically set to 980px. Therefore, webpages on the pc can basically be displayed on the mobile phone, but the elements look very small. By default, You can manually scale the webpage.

Visual viewport and physical pixels

Visual viewport: Specifies the visible area of the physical screen. The physical pixels of the screen display, the screen of the same size, the device with a high pixel density, and more hardware pixels. For example, the physical pixel of the iPhone:

IPhone5: 640*1136
IPhone6: 750*1334
IPhone6 Plus: 1242*2208
Ideal viewport and dip (device logic pixel)

Ideal viewport is usually the screen resolution we call.

Dip (device logic pixel) is independent of the hardware pixel of the device. A dip occupies the same space on any device screen with pixel density.

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

Logical pixel width * magnification = physical pixel width

The resolution of mobile phone screens is usually not set. It is usually a fixed value set by the device manufacturer by default. In other words, the dip value is the value of ideal viewport (ideal view) (that is, the resolution, for example, iPhone screen resolution:

IPhone 5: resolution 320*568, physical pixel 640*1136, @ 2x
IPhone 6: resolution 375*667, physical pixel 750*1334, @ 2x
IPhone6 Plus: resolution 414*736, physical pixel 1242*2208, @ 3x, (note: the actual image aspect ratio is reduced to 1080x1920. The specific reason will be included at the end of this article)

CSS pixels

The Unit in which CSS pixels (px) are used for page layout. The pixel size of the style (for example, width: Px) is specified in CSS pixels. The ratio of CSS pixels to dip is the scaling ratio of the webpage. If the webpage is not scaled, 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 attributes of the viewport meta tag:

Copy the content to the clipboard using CSS Code.

1. <Meta id = "viewport" name = "viewport" content = "width = device-width; initial-scale = 1.0; maximum-scale = 1; user-scalable = no; ">

Here is a detailed introduction to each attribute:

Attribute name	Value	Description
Width	Positive Integer or device-width	Defines the width of the view, in pixels.
Height	Positive Integer or device-height	Defines the height of a view, in pixels. Generally, this parameter is not required.
Initial-scale	[0.0-10.0]	Define the initial scaling Value
Minimum-scale	[0.0-10.0]	Defines the minimum scale, which must be smaller than or equal to the value of maximum-scale.
Maximum-scale	[0.0-10.0]	Defines the maximum zoom-in ratio, which must be greater than or equal to the value of minimum-scale.
User-scalable	Yes/no	Specifies whether to allow users to manually scale pages. The default value is yes.

Width

The width attribute is used to control the width of layout viewport. The default value of layout viewport width is specified by the device manufacturer. For iOS and Android, you can set the resolution of the viewport to 980px. We can set width = 320 to the exact number of rows or the special value "device-width", generally for Adaptive Layout, the common practice is to set width to device-width, for example:

Copy the content to the clipboard using CSS Code.

1. <Meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1">

Width = device-width: Set the width of layout viewport to the width of ideal viewport. When the page scale ratio is 100%, a CSS pixel corresponds to a dip (device logic pixel), and layout viewport (layout-Based View) width, ideal viewport (ideal view) the width of the dip is equal.

Height

Similar to width, but not commonly used.

Initial-scale

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

Copy the content to the clipboard using CSS Code.

1. <Meta name = "viewport" content = "initialize-scale = 1.5"/>

Initial-scale = 1 indicates setting the width of layout viewport (layout View) to the width of ideal viewport (ideal view). initial-scale = 1.5 indicates setting layout viewport (layout View) the width of is 1.5 times the width of ideal viewport.

Maximum-scale

Maximum-scale is used to specify the maximum scale that a user can zoom in. For example

Copy the content to the clipboard using CSS Code.

1. <Meta name = "viewport" content = "initial-scale = 1, maximum-scale = 3"/>

Assuming that the default page scale value initial-scale is 1, the user can eventually enlarge the page to three times the initial page size.

Minimum-scale

Similar to the description of maximum-scale, however, minimum-scale is used to specify the page scale-down ratio. Generally, the value of this attribute is not defined, and the page is too small to read.

User-scalable

User-scalable controls whether users can scale pages by using gestures. The default value of this attribute is yes, which can be scaled. You can also set this value to no, indicating that users are not allowed to scale the webpage. For example:

Copy the content to the clipboard using CSS Code.

1. <Meta name = "viewport" content = "user-scalable = no"/>

PS: iPhone screen resolution
The iPhone 6 Plus official nominal screen is 1920x1080, but in Xcode we found that the simulator screen is actually a strange 2208x1242. Why?

This is the case for narrowing down the proportion by 17%? Let's see the answer on Stack Overflow: iPhone 6 Plus resolution confusion: Xcode or Apple's website? Simply put, it is to cut the magnification of the image, and the actual rendered pixels are all positive integers.