[front-end]iOS 10下 viewport中user-scalable=no 无效，无法禁止用户缩放页面

Question

进行移动端前端页面开发的时候有时候需要禁止用户缩放页面

一般使用meta声明如下即可：

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

ios10下失效了，请问有解决办法吗？

Answer 1

这是IOS10的一个新特性。无解的。以下是苹果官网的摘录

To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

翻译过来就是

为了提高Safari中网站的辅助功能，即使网站在视口中设置了user-scalable = no，用户也可以手动缩放。

Answer 2

user-scalable=no 主要是防止双击放大

Answer 3

window.onload=function () {

    document.addEventListener('touchstart',function (event) {
        if(event.touches.length>1){
            event.preventDefault();
        }
    })
    var lastTouchEnd=0;
    document.addEventListener('touchend',function (event) {
        var now=(new Date()).getTime();
        if(now-lastTouchEnd<=300){
            event.preventDefault();
        }
        lastTouchEnd=now;
    },false)
}

Answer 4

遇到了同样的问题 请问找到解决方案了没啊

Answer 5

试下加上最大最小缩放都设置为1

Answer 6

都是用微信或者UC浏览器测试，还真没发现safari会这样

Answer 7

苹果也这么想不开

Answer 8

 let lastTouchEnd = 0;
      document.addEventListener('touchstart', function (event) {
    return touchstartFunction(event)
  });
      document.addEventListener('touchend', function (event,lastTouchEnd) {
    return touchendFunciton(event,lastTouchEnd)
  }, false);
      // 阻止双指放大
      document.addEventListener('gesturestart', function (event) {
    return gesturestartFunction(event)
  });

亲测可以用.