如何禁用移动Safari上的视口缩放?

这三种方法我都试过了，但都无济于事:

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

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />

每个是不同的值，我发现谷歌搜索或SO搜索推荐，但没有一个'user-scalable=X'值似乎是工作的

我还尝试用逗号来分隔值，而不是分号，运气不好。然后我尝试只呈现用户可扩展的价值，但仍然没有成功。

更新

从苹果的网站上得到了这个，它是有效的:

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

事实证明，问题是不标准的引号，因为我从一个网站复制了元标签，正在使用他们，哎呀

当前回答

@mattis是正确的，iOS 10 Safari不允许你禁用用户缩放属性的缩放。但是，我在'gesturestart'事件上使用preventDefault禁用了它。我只在iOS 10.0.2的Safari上验证了这一点。

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

2016-09-26 20:36:31

其他回答

对于iphone safari到iOS 10“viewport”不是一个解决方案，我不喜欢这种方式，但我已经使用了这个javascript代码，它帮助了我

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

2017-03-14 07:53:01

我设法通过向HTML头添加以下内容来阻止这种行为。这适用于移动设备，因为桌面浏览器在使用鼠标滚轮时支持缩放。这在桌面浏览器上不是什么大问题，但考虑到这一点很重要。

和下面的规则到CSS样式表

html { -webkit-text-size-adjust:没有; touch-action:操纵; ｝

2018-07-16 18:54:39

我尝试了以上所有方法，但这在IOS设备上很管用:

<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">

2022-11-10 13:57:49

实际上苹果在最新的iOS版本中禁用了user-scalable=no。我尝试了一下，这种方法是可行的:

body {
  touch-action: pan-x pan-y;
}

2020-11-18 07:36:00

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

2016-09-26 20:36:31

如何禁用移动Safari上的视口缩放?

推荐文章

最新文章

标签