Layout ViewPort: A layout viewport. On ios, the default layout viewPort for mobile browsers is 980px.

Visual ViewPort: the pixel resolution of the device. Take iphone8 as an example, the resolution is 750*1334 pixels. Each phone has a different pixel resolution, which is determined by the hardware.

The ideal viewport. The ideal viewport is the same width as the device, 375px for the iphone8.


In mobile development, we use meta tags to control viewPort.

<meta  name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">Copy the code

Width: Width = layout viewport, device-width = Ideal Viewport So width=device-width means set the Layout ViewpPort to the ideal Viewport width.

Initial-scale: Specifies the initial scale of the page. The ratio is ideal ViewPort/Layout viewPort, and when the ratio is 1, the two are equal.

<meta name="viewport" content="initial-scale=1">Copy the code

with

<meta name='viewport' content='width=device-width' />Copy the code

The effect of the two meta Settings is the same.


Maxinum-scale: Maximum scale that allows users to zoom in and out of a page.

Mininum-scale: The minimum zoom ratio that allows the user to zoom in on the page.

User-scalable: Whether to allow users to manually scale the page.


The relationship between the three viewports (take iPhone8 as an example) :

The Ideal ViewPort basically determines how big a Layout viewPort can be.

Visual ViewPort/Ideal ViewPort ratio is 2, iphone8 is 2x.


Reference: http://www.cnblogs.com/2050/p/3877280.html