How to automatically prevent mobile browsers from automatically adjusting the page size during responsive design

How to automatically prevent mobile browsers from automatically adjusting the page size during responsive design

As we all know, when designing a responsive page, we often encounter some browsers that will narrow down the entire page to prevent page interceptions,

We need to zoom in to see the content. This is the function for mobile browsers to automatically adjust pages.

This completely fails to meet the responsive requirements.

So the question is, how can we prevent the browser from automatically adjusting the page size.

Sometimes, when looking at the response code written by others, the following code is often displayed in the head label.

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

<Meta> tag, name = "viewport" is self-evident, it refers to the control of the access. content = "initial-scale = 2.0" means to enlarge the page twice (likewise, 0.5 indicates that the image size is reduced by half, and 3.0 indicates that the image size is increased by three times ),

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

<Meta> the tag can also control the page's scalable range. The following code allows the user to zoom in to a maximum of three times the width of the device, and compress the page to a minimum of half.

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

Of course, scaling can also be disabled,

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