SoFunction
Updated on 2025-04-05

In Vue project, prevent pages from being scaled and enlarged.

Now after the vue scaffolding project is generated, we will find the page.

In the head tag, we will see that a meta tag shows that

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

However, we found that this statement just allows user-scalable=0, which is to prevent the user from scaling.

The page can be enlarged on two fingers! ! !
The page can be enlarged on two fingers! ! !
The page can be enlarged on two fingers! ! !

This is very embarrassing. . .

So put the meta tag in the page

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

The maximum-scale, minimum-scale and user-scalable attributes control how users can zoom in or out of pages.

Replacing the original meta tag with the existing sentence can prevent users from magnifying. Similarly, it can also prevent the page from being scaled by the user.

The above article in the Vue project, the example of preventing the page from being scaled and enlarged is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.