In the VUE mobile terminal project, the page restricts the user to zoom
When working on a project today, I mentioned a requirement, which is to prohibit the h5 page from shrinking and zooming in on the mobile terminal.
introduce:
In the project generated with vue scaffolding [vue-cli], in the head tag of the public/index.html page, there is a mate tag:
<meta name="viewport" content="width=device-width,initial-scale=1.0">initial-scale
initial zoom. That is, the initial zoom level of the page. This is a floating point value that is a multiplier for the page size. For example, if you set the initial zoom to "1.0", then the web page will be displayed at 1:1 of the target density resolution. If you set it to "2.0", then this page will be enlarged to 2 times.
maximum-scale
Maximum zoom. That is, the maximum zoom level allowed. This is also a float value indicating the maximum multiplier for the page size compared to the screen size. For example, if you set this value to "2.0", then the page can be enlarged up to 2 times compared to the target size.
user-scalable
User adjusts zoom. That is, whether the user can change the zoom level of the page. If it is set to yes, the user is allowed to change it, otherwise it is no. The default value is yes. If you set it to no, both minimum-scale and maximum-scale will be ignored, since scaling is not possible at all.
NOTE: All scaling values must be in the range 0.01–10.
Solution:
Add maximum-scale=1.0 user-scalable=no to the meta tag to solve the page restriction user scaling! ! ! ! ! ! !
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>