[Viewport] compatibility of mobile devices and viewport

[Viewport] compatibility of mobile devices and viewport
Some time ago, when I used a developer tool to reconstruct a menu project, I found the problem of incomplete display and layout disorder, and found a simple and crude solution. The viewports on mobile devices are dividedLayout viewport,Visual viewport And Ideal viewportAmong them, ideal viewport is the most suitable viewport for mobile devices. The width of ideal viewport is equal to the screen width of mobile devices, as long as the width of an element in css is set to the width of ideal viewport (unit: px), the width of this element is the width of the device screen, that is, the effect of 100% in width. The significance of ideal viewport is that, no matter what resolution screen, Websites designed for ideal viewport do not require manual scaling or horizontal scroll bars, can be perfectly presented to users. Because the ideal viewport width of all iPhones is 320px, the simple and crude method for adapting H5 pages to all iphone phones and Android models is as follows: set viewport <meta name = "viewport" content = "width = 320, maximum-scale = 1.3, user-scalable = no "> meta viewport label is first introduced by Apple in its safari browser to solve the viewport problem of mobile devices. Later, Android and various browser vendors followed suit and introduced support for meta viewport, which proved to be very useful. In Apple's specifications, meta viewport has six attributes (for the moment, those in content are called attributes and values), as follows:

Width	SetLayout viewportIs a positive integer or string "width-device"
Initial-scale	Set the initial scaling value of the page to a number with decimals.
Minimum-scale	The minimum scaling value of a user, which is a number with decimal digits.
Maximum-scale	The maximum scaling value of a user, which is a number with decimal digits.
Height	SetLayout viewportThis attribute is not important to us and is rarely used.
User-scalable	Whether to allow scaling. The value is "no" or "yes". "no" indicates no, and "yes" indicates allow.

These attributes can be used at the same time, or separately or in combination. Separate multiple attributes with commas.