如何在Mobile 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;” />

每个都是我通过Google搜索或SO搜索推荐的不同值，但是' user-scaleable = X '值似乎都不起作用

我还尝试了用逗号分隔值，而不是分号，没有运气。然后，我尝试仅使用user-scalable值，仍然没有运气。

更新

从苹果网站上得到了它，它的工作原理是：

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

事实证明，问题出在非标准引号，因为我从使用它们的网站复制了元标记，哎呀

#1楼

有时，内容中的其他指令可能会使您的视图与Apple关于如何布局页面的最佳猜测混淆，您需要禁用捏缩放功能是

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

#2楼

尝试将以下内容添加到您的标签中：

<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
}

#3楼

为了符合WAI WCAG 2.0 AA的可访问性要求，您绝不能禁用收缩缩放。（WCAG 2.0：SC 1.4.4调整AA级文本的大小）。您可以在此处了解更多信息：移动辅助功能：WCAG 2.0和其他W3C / WAI准则如何应用于移动设备，2.2缩放/放大

#4楼

在Safari 9.0及更高版本中，您可以在视口meta标签中使用“ 缩小以适合” ，如下所示

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

#5楼

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

从发行说明 ：

为了提高Safari中网站的可访问性，即使网站在视口中设置了user-scalable = no，用户现在也可以捏缩放。

据我了解，我们很不走运。

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3175986

标签

safari