禁止safari浏览器双指缩放和双击放大页面的功能

1、普通浏览器,只需要增加meta标签禁止缩放功能就行了

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  • user-scalable=no或0 //禁止双指缩放页面
  • initial-scale=1.0, maximum-scale=1.0 //禁止屏幕放大缩小功能

2、以上解决了普通浏览器的双击放大和双指缩放功能,但是safari浏览器还是存在放大功能,并没有解决。所以要添加一下js代码,来禁止safari浏览器的缩放功能。

     //阻止safari浏览器双击放大功能
     let lastTouchEnd = 0  //更新手指弹起的时间
    document.documentElement.addEventListener("touchstart", function (event) {
        //多根手指同时按下屏幕,禁止默认行为
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      });
      document.documentElement.addEventListener("touchend", function (event) {
        let now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
         //当两次手指弹起的时间小于300毫秒,认为双击屏幕行为
          event.preventDefault();
        }else{ // 否则重新手指弹起的时间
          lastTouchEnd = now;
        }
      }, false);
      //阻止双指放大页面
      document.documentElement.addEventListener("gesturestart", function (event) {
        event.preventDefault();
      });

3、ok,加上以上meta标签和js代码,解决了禁止全部浏览器的双击放大和双指缩放页面功能。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。