Viewport principle and methods of using and setting up the mobile self-adaptation

Viewport principle and methods of using and setting up the mobile self-adaptation

In HTML:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" >

　　

The META tag's purpose is to make the current viewport width equal to the width of the device, while not allowing the user to scale manually. Of course maximum-scale=1.0, user-scalable=0 is not required, whether to allow users to manually play according to the needs of the site, but the width is set to Width-device basic is necessary, so as to ensure that there will be no horizontal scroll bar.

Meta Viewport 6 Properties:

Width:viewport width height:viewport height initial-scale: initial zoom Maximum-scale: Maximum zoom minimum-scale: Min. scale user-scalable: Whether to allow user scaling

　　

<meta name= "viewport" content= "Width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, User-scalable=yes ">

Do we have to write these five attributes all the time for this line of code? The answer must be no, for example: If you add User-scalable=no, then minimum-scale=1, maximum-scale=1 These two attributes don't have to be appended. Because you have banned users from scaling the page, the allowable zoom range will not exist.

There's no need to append minimum-scale=1, maximum-scale=1 these two attributes.
<meta name= "viewport" content= "Width=device-width, initial-scale=1, User-scalable=no" >

3 x Viewport

(1) Layout viewport--Layouts window

If the viewable area of the browser on the mobile device is set to viewport, some websites will show confusion because the viewport is too narrow, so these browsers will set viewport to a wider value by default, such as 980px, This allows even those websites designed for PC browsers to display properly on mobile browsers. The default viewport of this browser is called Layout viewport. The width of layout viewport can be obtained by document.documentElement.clientWidth.
(2) Visual viewport--Visual window
The width of layout viewport is greater than the width of the viewable area of the browser, so a viewport is required to represent the size of the viewable area of the browser, which is called visual viewport. Viewport. The width of the visual viewport can be obtained by document.documentElement.innerWidth.
(3) Ideal viewport--ideal window
The ideal viewport is a viewport that fits perfectly with mobile devices. First of all, you do not need to zoom and the horizontal scroll bar to view all the contents of the site, second, the display of text, picture size appropriate, such as 14px text will not be shown in a high-density pixel screen is too small to see, regardless of the density of the screen, at what resolution, the size of the display is similar. This viewport is called ideal viewport.
Ideal viewport does not have a fixed size, different devices have different ideal viewport. For example, all iphone's ideal viewport width is 320px, regardless of whether its screen width is 320 or 640.
The significance of ideal viewport is that, regardless of the resolution screen, the site designed for ideal viewport does not need to be scaled and the horizontal scroll bar is perfectly presented to the user.

Viewport set the Mobile-adaptive method:

<meta name= "viewport" content= "Width=device-width, initial-scale=1" >

　　

Viewport principle and methods of using and setting up the mobile self-adaptation