Viewport (viewport) in the mobile front end

The viewport (viewport), often said in the mobile front, is the screen area where the browser displays the content of the page. Several important concepts involved are the relationship between DPI (device-independent pixel device logic pixels) and CSS pixels.

(1) Layout viewport (layouts viewport)

The browser of the general mobile device defaults to a viewport meta tag, which defines a virtual layout viewport, which is used to solve the problem of earlier pages appearing on the phone. IOS, Android basically set this viewport resolution to 980px, so the PC's page basically can be rendered on the phone, but the elements appear to be small, the general default can be manually scaled by the page.

(2) Visual viewport (visual viewport) and physical pixels

Visual viewport (visual viewport) Device physical screen visual area, screen display of physical pixels, the same size of the screen, pixel density devices, hardware pixels will be more. For example, the physical pixels of the iphone:

• iphone5:640 * 1136
• iphone6:750 * 1334
• IPhone6 plus:1242 * 2208

(3) Ideal viewport (ideal viewport) and dip (device logic pixels)

Ideal viewport (ideal viewport) is usually the screen resolution we're talking about.

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

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

Logical pixel width * magnification = physical pixel width

Mobile phone screen usually can not set the resolution, is generally the device factory default fixed value, in other words, the DPI value is ideal viewport (ideal viewport) (that is, the resolution) value, such as the iphone screen resolution:

1. IPhone5: Resolution 320 * 568, Physical pixel 640 * 1136,@2X
2. IPhone6: Resolution 375 * 667, physical pixels * 1334,@2x
3. IPhone6 Plus: Resolution 414 * 736, physical pixel 1242 * 2208,@3x, (note that the actual display image is reduced to 1080x1920, for specific reasons see: http://www.css88.com/archives/5972)

(4) CSS pixels

CSS pixels (px) are used for page layout units. The pixel dimensions of the style (for example, width:100px) are specified in CSS pixels. The ratio of CSS pixels to dpi is the scale of the Web page, and if the page is not scaled, then a CSS pixel corresponds to a dpi (device logic pixel).

(5) Control layout with viewport meta tags

First look at the viewport meta tag Extreme properties:

<meta id= " Viewport " name=" viewport " content=

Property name	Take value	Description
Width	Positive integer or Device-width	Defines the width of a viewport in pixels
Height	Positive integer or Device-height	Defines the height of the viewport, in pixels, generally not
Initial-scale	[0.0-10.0]	Defining initial scaling values
Minimum-scale	[0.0-10.0]	Defines the minimum scale to be reduced, which must be less than or equal to the Maximum-scale setting
Maximum-scale	[0.0-10.0]	Defines the magnification maximum scale, which must be greater than or equal to the Minimum-scale setting
User-scalable	Yes/no	Defines whether the user is allowed to manually scale the page, the default value is Yes

Width

The Width property is used to control the widths of the layout viewport (layouts viewport), and the default value for layout viewport (layouts viewport) width is specified by the device manufacturer. IOS, Android basically set this viewport resolution to 980px. We can width=320 this to be the exact number of pixels, or it can be set to a special value of device-width, generally for adaptive layout, the general practice is to set width to Device-width, for example:

1. <meta Name="viewport" content="Width=device-width, initial-scale=1, Maximum-scale=1 ">

Width=device-width is the width of the layout viewport, which is ideal viewport (ideal viewport). When a Web page is scaled to 100%, a CSS pixel corresponds to a dpi (device logic pixel), while the width of the layout viewport (layouts viewport), the width of the ideal viewport (the ideal viewport), and the usual resolution, the DPI width value is equal.

Height

Similar to width, but actually not used.

Initial-scale

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

1. <meta Name="viewport" content="initial-scale=1.5" />

Initial-scale=1 indicates that the width of the layout viewport (the layouts viewport) is set to the width of the ideal viewport (ideal viewport), and initial-scale=1.5 indicates that the layout The width of the viewport (layout viewport) is set to 1.5 times times the width of the ideal viewport (ideal viewport).

Maximum-scale

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

1. <meta Name="viewport" content="initial-scale=1,maximum-scale=3" / >

Assuming that the default zoom value of the page Initial-scale is 1, the user will eventually be able to enlarge the page to 3 times times the initial page size.

Minimum-scale

A description similar to Maximum-scale, but Minimum-scale is used to specify the page scaling. Typically, the value of the property is not defined and the page is too hard to read.

User-scalable

User-scalable to control whether a user can scale a page with gestures. The default value for this property is yes, which can be scaled, or you can set the value to no, which means that the user is not allowed to scale the page. For example:

1. <meta Name="viewport" content="User-scalable=no" />

Viewport (viewport) in the mobile front end