Detailed explanation of the solution to the scaling problem of HTML5 mobile page

Usually when writing HTML5 mobile page, we will find that the proportion of elements displayed on the page is incorrect, then what we need to add at this time is:

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

or

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

Then let’s explain this sentence:

viewport: represents the display window;

width=device-width,initial-scale=1.0: represents The width of the display window is equal to the screen width of the device, initial-scale=1.0, that is, the initial scaling ratio is 1.0;

minimum-scale: represents the minimum ratio allowed for scaling

maximum: Indicates the maximum zoom ratio allowed

user-scalable: Indicates whether the user is allowed to zoom the page, the value can be yes or no

Example problem situation:

Phenomenon:

When the user clicks on the input box to edit text on the mobile page, the page will automatically be enlarged

Solution:

Insert

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />