如何在 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;” />
每个都是我发现谷歌搜索或 SO 搜索推荐的不同值，但“user-scalable=X”值似乎都不起作用
我还尝试用逗号而不是分号来分隔值，但运气不好。然后我尝试只存在 user-scalable 值，仍然没有运气。
更新
从 Apple 的网站上得到了这个，它可以工作：
<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 解决方案的人，user-scaleable=no 在 iOS 10 的 Safari 中被禁用。原因是 Apple 正试图通过允许人们放大网页来提高可访问性。
从发行说明：
为了提高 Safari 中网站的可访问性，即使网站在视口中设置了 user-scalable=no，用户现在也可以捏合缩放。
据我了解，我们真倒霉。
@mattis 是正确的，iOS 10 Safari 不允许您使用用户可缩放属性禁用捏缩放。但是，我在“gesturestart”事件中使用 preventDefault 来禁用它。我只在 iOS 10.0.2 的 Safari 上验证了这一点。
document.addEventListener('gesturestart', function (e) {
e.preventDefault();
});
gesturestart 的“双击”？ dblclick？
使用 CSS touch-action 属性是最优雅的解决方案。在 iOS 13.5 和 iOS 14 上测试。
要禁用捏缩放手势并双击缩放：
body {
touch-action: pan-x pan-y;
}
如果您的应用也不需要平移，即滚动，请使用以下命令：
body {
touch-action: none;
}
touch-action: pan-x pan-y 很糟糕而且损坏了。如果你反复捏，它仍然会缩放大约 5% 的时间。
对于 iphone safari 到 iOS 10 “视口”不是一个解决方案，我不喜欢这种方式，但我使用了这个 javascript 代码，它帮助了我
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if(event.scale > 1) {
event.preventDefault();
}
}, false);
event.scale !== 1
event.scale !== undefined && event.scale !== 1
我使用以下代码在 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。
实际上，Apple 在最新的 iOS 版本上禁用了 user-scalable=no。我尝试作为指导，这种方式可以工作：
body {
touch-action: pan-x pan-y;
}
user-scalable=0
这不再适用于 iOS 10。Apple 删除了该功能。
现在你无法在 iOS 上禁用缩放网站，除非你制作了粗糙的平台应用程序。
我设法通过将以下内容添加到 HTML 标头来阻止这种行为。这适用于移动设备，因为桌面浏览器在使用鼠标滚轮时支持缩放。在桌面浏览器上这不是什么大问题，但重要的是要考虑到这一点。
以及 CSS 样式表的以下规则
html { -webkit-text-size-adjust：无；触摸动作：操纵； }
尝试将以下内容添加到您的 head-tag 中：
<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 10.3.2 中运行良好
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
}
}, false);
谢谢@arthur 和@aleclarson
在 Safari 9.0 及更高版本中，您可以在视口元标记中使用缩小以适应，如下所示
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
有时，content 标记中的那些其他指令可能会混淆 Apple 在如何布局您的页面时的最佳猜测/启发式方法，您只需要禁用捏缩放即可。
<meta name="viewport" content="user-scalable=no" />
如前所述，该解决方案基本上在 2020 年末有效：
document.addEventListener(
'gesturestart', (e) => e.preventDefault()
);
但不利的一面是，当你滚动时，你仍然可以捏，然后它就会卡住。解决方案是禁用滚动。
body {
overflow: hidden;
}
但是，如果您仍然希望页面滚动怎么办？您仍然可以将另一个 <div> 设置为 overflow:auto：
<body>
<div id='app'></div>
</div>
接着
body {
overflow: hidden;
}
#app {
-webkit-overflow-scrolling: touch;
height: 100vh;
height: -webkit-fill-available;
overflow: auto;
}
为了符合 WAI WCAG 2.0 AA 无障碍要求，您必须永远不要禁用捏缩放。 （WCAG 2.0：SC 1.4.4 调整文本级别 AA）。您可以在此处阅读更多信息：Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile, 2.2 Zoom/Magnification
eval() 有有效的用例一样，禁用缩放也是如此。我将它用于与蓝牙扫描仪结合使用的网络应用程序，以防止在扫描条形码时页面缩放。
我愚蠢地有一个以像素为单位的宽度的包装器 div。其他浏览器似乎足够智能来处理这个问题。一旦我将宽度转换为百分比值，它在 Safari 移动设备上也能正常工作。很烦人。
.page{width: 960px;}
至
.page{width:93.75%}
<div id="divPage" class="page">
</div>
这个应该在iphone等上工作。
<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
关注公众号
不定期副业成功案例分享
