Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to solve the problem of banning double-finger zooming on the mobile end, which has a certain reference value. Interested friends can refer to it. I hope you will learn a lot after reading this article. Let's take a look at it.

For mobile development, add a meta tag to the page header and add a user-scalable=no attribute to prohibit double-finger or double-click magnification: in actual development, we prohibit the implementation of zooming:

Disable the two-finger scaling meta setting:

User-scalabel=no or user-scalabel=yes (yes can be scaled, no or 0 cannot be scaled)

In systems above ios10, meta tags are not supported, so we need to implement them through scripts:

Window.addEventListener (

"touchmove"

Function (event) {

If (Event.scaleScaleScaleScaleScaleScaleScaleDeposition1) {

Event.preventDefault ()

}

}, {

Passive:false

}

)

Note: when double-finger zooming is disabled, the scroll event needs to be rebound, and the scrollbar event listens for touchmove,touchstart,touchend.

Prohibit two-finger zooming solution

However, some mobile browsers, such as Safari above IOS10, UC browser under Android, QQ Browser, etc., do not follow the developer's prohibition of zooming for a better user experience. Although the meta tag is written as above, users are still allowed to zoom in with both fingers and double-click.

The solution is to add another js, judge multiple fingers (touches.length) by the touchmove event, and do so by preventing the event from bubbling event.preventDefault ().

Write a demo, you can refer to, click here for online preview: prohibit individual browsers on mobile from zooming

PS: after we have operated with two fingers for many times, UC browsers will still break through our restrictions and achieve system-level mandatory double-finger scaling of pages according to the wishes of users. The same is true for stations in big factories such as Taobao and Tmall. Therefore, it is impossible to completely prohibit user scaling through web code. Feel sorry for the front-end brothers for a second.

Disable zooming of some browsers on mobile

Sun Qizheng blog

Www.sunqizheng.com try it with two fingers, you can't zoom!

* {

Padding:0

Margin:0

}

Html

Body {

Width:100%

Height:100%

}

Thank you for reading this article carefully. I hope the article "how to solve the problem of banning double-finger zooming on mobile devices" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.