如何在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" />

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

您的代码将属性双引号显示为花式双引号。如果您的实际源代码中包含花哨的引号，我想可能是问题所在。

这对我适用于iOS 4.2中的Mobile Safari。

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

对于正在寻找iOS 10解决方案的人们，在iOS 10的user-scaleable=noSafari中已被禁用。原因是Apple试图通过允许人们放大网页来改善可访问性。

从发行说明：

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

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

@mattis是正确的，因为iOS 10 Safari不允许您使用用户可缩放属性禁用捏缩放。但是，我在'gesturestart'事件上使用了preventDefault来禁用它。我仅在iOS 10.0.2的Safari上对此进行了验证。

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

适用于iOS 10或更高版本的iPhone Safari浏览器“视口”不是解决方案，我不喜欢这种方式，但是我使用了此javascript代码，它对我有帮助

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

user-scalable=0

这在iOS 10上不再起作用。Apple删除了该功能。

除非您制作总平台应用，否则您无法立即在iOS上禁用缩放网站。

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

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

我使用以下代码在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环境中执行，则滚动行为将被破坏）。另外，请注意passive设置为的选项false。

在IOS 10.3.2中工作正常

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

谢谢@arthur和@aleclarson

我设法通过将以下内容添加到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: none;
	touch-action: manipulation;
}

有时，content标记中的其他指令会弄乱Apple关于如何布局页面的最佳猜测/启发式，您只需禁用捏缩放即可。

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

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

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

我愚蠢地有一个包装器div，其宽度以像素为单位。其他浏览器似乎足够智能，可以解决此问题。一旦将宽度转换为百分比值，它就可以在Safari移动版上正常工作。很烦人。

.page{width: 960px;}

至

.page{width:93.75%}

<div id="divPage" class="page">
</div>

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

要禁用双指缩放手势，然后点按两次以缩放：

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

如果您的应用也不需要平移（即滚动），请使用以下命令：

body {
  touch-action: none;
}

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

这个应该可以在iphone等上使用。

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