欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

移动端禁止用户缩放页面大小尺寸

程序员文章站 2022-06-21 10:47:05
...

通常我们关闭移动端页面缩放是通过标签:

  <meta name="viewport" content="width=375,initial-scale=1,user-scalable=no">

这个方法有局限性,因为部分浏览器存在可支持用户强制缩放的功能,所以想要完全禁止用户的触控缩放,需要在项目index.html中监听用户双击、双指触摸事件来禁止放大:

 //禁止双指放大
   document.documentElement.addEventListener('touchstart', function (event) {
       if (event.touches.length > 1) {
           event.preventDefault();
       }
   }, {passive:false});
   // 禁止双击放大
   let lastTouchEnd = 0;
   document.documentElement.addEventListener('touchend', function (event) {
       var now = Date.now();
       if (now - lastTouchEnd <= 300) {
           event.preventDefault();
       }
       lastTouchEnd = now;
   }, {passive:false});