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

<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" />

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


当前回答

user-scalable=0

这在iOS 10上不再适用。苹果删除了这一功能。

没有办法你可以禁用缩放网站在iOS现在,除非你做gross平台应用。

其他回答

编辑:在ios10之后可能无法工作,请参阅下面基于触摸动作的解决方案。

您的代码将属性双引号显示为花哨的双引号。如果花哨的引号出现在您的实际源代码中,我猜这就是问题所在。

这对我来说在iOS 4.2的Mobile Safari上是有效的。

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

我在iOS 12中使用以下代码:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

使用第一个if语句,我确保它只会在iOS环境中执行(如果它在Android中执行,滚动行为将被破坏)。另外,请注意被动式选项设置为false。

对于寻找iOS 10解决方案的人来说,在iOS 10的Safari中,user-scaleable=no是禁用的。原因是苹果正试图通过允许人们放大网页来提高可访问性。

来自发行说明:

为了提高Safari网站的可访问性,用户现在可以 中设置了user-scalable=no时,也可以缩放 视窗。

所以据我所知,我们运气不好。

为了符合WAI WCAG 2.0 AA可访问性要求,您必须永远不要禁用缩放。(WCAG 2.0: SC 1.4.4 Resize text Level AA)。你可以在这里阅读更多关于它的内容:移动辅助功能:WCAG 2.0和其他W3C/WAI指南如何应用于移动,2.2缩放/放大

这在IOS 10.3.2中运行良好

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

谢谢@arthur和@aleclarson