This is the 26th day of my participation in Gwen Challenge
preface
In the process of Vue project development, there will be a variety of problems, especially for beginners who have just started, it is necessary to be careful everywhere, or accidentally fall into the pit. Based on the mobile end Vue project development, will have a common problem, that is not closing procedures double-click amplification, double after widening amplification Vue mobile application to inside of the full range of amplification, usually is on by default, namely by default can be defined by double-clicking the amplification, double widened after amplification of operation, etc.
Analysis of the
For mobile the Vue enlarge the double-click amplification, double after widening project such as enlarge operation, generally don’t need to change the operation, business requirements and generally do not have this kind of demand, and if the project is not disabled closed, double-click the enlarged operations such as open the project program by mobile phones, in the case of limited interface display double-click amplification etc again for operation, It will cause the program amplification based on mobile terminal, causing the problem of program display amplification, and the program operation experience after amplification is very bad, which requires the developer to close and disable the operation of double-click amplification and other operations in the project during development.
steps
To disable double click amplification in the disabled project, go to the index.html file in the Vue project and modify the file. Let’s take a look at the default format of the index.html file in the Vue project. The code that does not disable double click to enlarge is as follows:
<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="format-detection" content="telephone=yes" /> <title></title> </head> <body> <div id="app"></div> </body> </html>Copy the code
Next modify the meta of the corresponding “viewport” in the index.html file by adding two attributes: maximum-scale=1.0 and user-scalable=0. The modified code looks like this:
<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <meta name="viewport" content="width=device-width,initial-scale=1.0, Maximum - scale = 1.0, user-scalable=0"> <meta name="format-detection" content="telephone=yes" /> <title></title> </head> <body> <div id="app"></div> </body> </html>Copy the code
Comparison of sample effects
The program is not disabled to close the effect of double click to enlarge and other operations:
Turned off the effects of double click to enlarge and other operations:
Through the above Settings, you can disable the operation of double click amplification, so as to improve the experience of the program, convenient for users to operate. The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “Program Ape by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention!