h5移动端禁止缩放解决方案

5,710 阅读1分钟

安卓:

在入口文件的html文件中加入meta标签即可

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

ios:ios有自己的js事件控制缩放,禁止掉事件的默认行为即可

     document.documentElement.addEventListener(
        "touchstart",
        function(event) {
          if (event.touches.length > 1) {
            event.preventDefault();
          }
        },
        false
      );

      var lastTouchEnd = 0;
      document.documentElement.addEventListener(
        "touchend",
        function(event) {
          var now = Date.now();
          if (now - lastTouchEnd <= 300) {
            event.preventDefault();
          }
          lastTouchEnd = now;
        },
        false
      );

      document.addEventListener("gesturestart", function(event) {
        event.preventDefault();
      });