How to automatically prevent mobile browsers from automatically resizing pages when designing responsively_html/css_WEB-ITnose

As we all know, when designing responsive pages, we often encounter certain 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 mobile browsers to automatically adjust the page.

This completely fails to meet the requirements of responsiveness.

Then the question is, how to prevent the browser from automatically adjusting the page size.

Sometimes when looking at responsive code written by others, you will often see the following code appearing in the head tag

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

The label, name="viewport" is self-evident, which refers to controlling the viewport. content="initial-scale=2.0" means enlarging the page twice (in the same way, 0.5 means reducing it by half, and 3.0 means enlarging it. 3 times),

At the same time, width=device-width tells the browser that the width of the page should be equal to the device width.

The tag can also control the zoomable range of the page. The following code allows the user to enlarge the page to a maximum of 3 times the device width and compress it to a minimum of half the device width.

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

Of course, zooming can also be disabled,

<meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>