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

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

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


当前回答

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

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

其他回答

使用CSS的touch-action属性是最优雅的解决方案。在iOS 13.5和iOS 14上测试。

禁用缩放手势和双击缩放:

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

如果你的应用程序也不需要平移,即滚动,使用这个:

body {
  touch-action: none;
}

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

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

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

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

有时候内容标签中的其他指令会打乱苹果关于如何布局页面的最佳猜测/启发式,你只需要禁用缩放。

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

试着在你的头标签上添加以下内容:

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

另外

<meta name="HandheldFriendly" content="true">

最后,无论是作为一个样式属性还是在你的css文件中,为基于webkit的浏览器添加以下文本:

html {
    -webkit-text-size-adjust: none
}

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

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

和下面的规则到CSS样式表

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