As we all know, when designing a responsive page, you often run into some browsers that will reduce the size of the entire page to prevent the page from being intercepted.
We need to zoom in to see what's in it. This is the function of the mobile browser to automatically adjust the page.
In this way, the response requirements are not fully reached.
So the question is, how to prevent the browser from automatically resizing the page.
Sometimes when you look at someone else's well-written response code, you often see the following code in the head tag.
<meta name= "viewport" content= "Initial-scale=2.0,width=device-width"/>
<meta> tags, name= "viewport" is self-evident, refers to the viewport to regulate, content= "initial-scale=2.0" means to enlarge the page twice times (the same way, 0.5 means to reduce the half, 3.0 means 3 times times the magnification),
Also, Width=device-width tells the browser that the width of the page should be equal to the device width.
<meta> tags can also control the extent to which the page can be scaled. The following code allows the user to enlarge the page up to 3 times times the width of the device, with the minimum compression to half the set.
<meta name= "viewport" content= "maximum-scale=3.0,minimum-scale=" 0.5 "width=device-width"/>
Of course, you can also disable scaling,
<meta name= "viewport" content= "Initial-scale=1.0,user-scalable=no"/>
How to automatically prevent the mobile browser from automatically resizing the page when responsive design