1、viewport
The viewport on a mobile device is the part of the device screen used to display the web page, and more specifically the part of the browser used to display the web page, but the viewport is not limited to the size of the browser's visible area, it may Larger than the browser's viewable area, and possibly smaller than the browser's viewable area. By default, the viewport on mobile devices is larger than the viewable area of the browser. This is because the resolution of mobile devices is relatively small compared to that of PCs, so in order to display those browsers for PCs normally on mobile devices For websites designed by browsers, browsers on mobile devices will set their default viewport to 980px or 1024px (or other values, determined by the device itself), but the consequence is that horizontal scroll bars appear in the browser, because the browser can view The width of the area is smaller than the default viewport width.
2, 3 viewports
（1）layout viewport
If the visible area of the browser on mobile devices is set to the viewport, some websites will display clutter because the viewport is too narrow, so these browsers will set the viewport to a wider value by default, such as 980px, so that even if It is those websites that are designed for PC browsers that also display properly on mobile device browsers. The browser's default viewport is called the layout viewport. The width of the layout viewport can be obtained through document.documentElement.clientWidth.
（2）visual viewport
The width of the layout viewport is greater than the width of the browser's visible area, so you also need a viewport to represent the size of the browser's visible area. This viewport is called a visual viewport. The width of the visual viewport can be obtained through document.documentElement.innerWidth.
（3）ideal viewport
An ideal viewport is a viewport that is perfectly adapted to mobile devices. First, all the content of the website can be viewed normally without zooming and horizontal scroll bars; secondly, the displayed text and pictures are of appropriate size, such as 14px text, which will not be too small to be viewed on a high-density pixel screen Clear, no matter what screen density or resolution, the displayed size is similar. This viewport is called ideal viewport.
The ideal viewport does not have a fixed size, and different devices have different ideal viewports. For example, all iPhones have an ideal viewport width of 320px, regardless of whether its screen width is 320 or 640.
The meaning of ideal viewport is that no matter what resolution screen is used, a website designed for ideal viewport can be perfectly presented to users without zooming and horizontal scroll bars.
3. Use the meta tag to control the viewport
The default viewport for mobile devices is the layout viewport, but when developing websites for mobile devices, the ideal viewport is required. To get ideal viewport, you need to use the meta tag.
In the head tag add:
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
The role of this meta tag is to make the width of the current viewport equal to the width of the device, while not allowing the user to manually zoom. Of course, maximum-scale=1.0, user-scalable=0 are not necessary. Whether users are allowed to play manually depends on the needs of the website, but it is basically necessary to set the width to width-device, so as to ensure that no horizontal scroll bar will appear. .
6 properties of meta viewport:
| width | Set the width of the layout viewport, as a positive integer, or the string "width-device" |
| initial-scale | Set the initial zoom value of the page, as a number, with decimals |
| minimum-scale | The minimum zoom value allowed by the user, as a number, with decimals |
| maximum-scale | The maximum zoom value allowed by the user, as a number, with decimals |
| height | Set the height of the layout viewport, this property is not important and rarely used |
| user-scalable | Whether to allow the user to zoom, the value is "no" or "yes", no means not allowed, yes means allowed |
Width can control the width of the layout viewport. If this property is not specified, the layout viewport will default to 980px or 1024px (or other values, determined by the device itself). If the width of the layout viewport is set to the width of the mobile device, then the layout The viewport will become the ideal viewport.
In fact, to set the current viewport width as the width of the ideal viewport, you can set either width=device-width or initial-scale=1, but there is a small flaw, that is, width=device-width will cause iphone, ipad There is no distinction between horizontal and vertical screens, and initial-scale=1 will cause IE to distinguish between horizontal and vertical screens, and the ideal viewport width of the vertical screen shall prevail. Therefore, the most perfect way to write both, initial-scale=1 solves the defects of iphone and ipad, and width=device-width solves the defects of IE.
The method of setting the mobile adaptive viewport:
- <meta name="viewport" content="width=device-width, initial-scale=1">