Html 如何在 Mobile Safari 上禁用视口缩放？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4389932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you disable viewport zooming on Mobile Safari?
提问by MetaGuru
I've tried all three of these to no avail:
我已经尝试了所有这三个都无济于事：
<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;” />
each are different values I found recommended by google searching or SO searching, but none of the 'user-scalable=X' values seem to be working
每个都是我通过 google 搜索或 SO 搜索发现的不同值，但“ user-scalable=X”值似乎都不起作用
I also tried comma delimiting the values instead of semicolon, no luck. Then I tried ONLY having the user-scalablevalue present, still no luck.
我还尝试用逗号分隔值而不是分号，但没有运气。然后我尝试只拥有user-scalable存在的价值，仍然没有运气。
UPDATE
更新
Got this from Apple's site and it works:
从苹果的网站上得到这个，它的工作原理：
<meta name="viewport" content="width=device-width, user-scalable=no" />
it turns out that the problem was the non-standard quotes because I had copied the meta tag from a website that was using them, whoops
事实证明，问题是非标准引号，因为我从使用它们的网站复制了元标记，哎呀
回答by BoltClock
Your code is displaying attribute double quotes as fancy double quotes. If the fancy quotes are present in your actual source code I would guess that is the problem.
您的代码将属性双引号显示为花式双引号。如果您的实际源代码中存在花哨的引号，我猜这就是问题所在。
This works for me on Mobile Safari in iOS 4.2.
这适用于 iOS 4.2 中的 Mobile Safari。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
回答by Mattis
For the people looking for an iOS 10 solution, user-scaleable=nois disabled in Safari for iOS 10. The reason is that Apple is trying to improve accessibility by allowing people to zoom on web pages.
对于寻找 iOS 10 解决方案的人来说，在 iOS 10 的user-scaleable=noSafari 中被禁用。原因是 Apple 试图通过允许人们放大网页来提高可访问性。
From release notes:
从发行说明：
To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.
为了提高 Safari 中网站的可访问性，即使网站在视口中设置了 user-scalable=no，用户现在也可以双指缩放。
So as far as I understand, we are sh** out of luck.
所以据我所知，我们很不走运。
回答by jeremypress
@mattis is correct that iOS 10 Safari won't allow you to disable pinch to zoom with the user-scalable attribute. However, I got it to disable using preventDefault on the 'gesturestart' event. I've only verified this on Safari in iOS 10.0.2.
@mattis 是正确的，iOS 10 Safari 不允许您使用用户可缩放属性禁用捏合缩放。但是，我让它在 'gesturestart' 事件上使用 preventDefault 禁用。我只在 iOS 10.0.2 的 Safari 上验证过。
document.addEventListener('gesturestart', function (e) {
e.preventDefault();
});
回答by Arthur Tsidkilov
for iphones safari up to iOS 10 "viewport" is not a solution, i don't like this way, but i have used this javascript code and it helped me
对于 iphone safari 到 iOS 10“视口”不是一个解决方案，我不喜欢这种方式，但我已经使用了这个 javascript 代码，它帮助了我
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if(event.scale > 1) {
event.preventDefault();
}
}, false);
回答by angry kiwi
user-scalable=0
This no longer works on iOS 10. Apple removed the feature.
这不再适用于 iOS 10。Apple 删除了该功能。
There is no way yo can disable zoom website on iOS now, unless you make gross platform app.
除非您制作了粗糙的平台应用程序，否则您现在无法在 iOS 上禁用缩放网站。
回答by Lorenz Lo Sauer
Try adding the following to your head-tag:
尝试将以下内容添加到您的头部标签中：
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
additionally
此外
<meta name="HandheldFriendly" content="true">
Finally, either as a style-attribute or in your css file, add the following text for webkit-based Browsers:
最后，作为样式属性或在您的 css 文件中，为基于 webkit 的浏览器添加以下文本：
html {
-webkit-text-size-adjust: none
}
回答by José Antonio Postigo
I got it working in iOS 12 with the following code:
我使用以下代码在 iOS 12 中运行它：
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
window.document.addEventListener('touchmove', e => {
if(e.scale !== 1) {
e.preventDefault();
}
}, {passive: false});
}
With the first if statement I ensure it will only execute in iOS environments (if it executes in Android the scroll behivour will get broken). Also, note the passiveoption set to false.
使用第一个 if 语句，我确保它只会在 iOS 环境中执行（如果它在 Android 中执行，滚动行为将被破坏）。另外，请注意passive设置为的选项false。
回答by imelgrat
I managed to stop this behavior by adding the following to the HTML header. This works on mobile devices, as desktop browsers support zooming when using the mouse wheel. It's not a big deal on desktop browsers but it's important to take this into account.
我设法通过将以下内容添加到 HTML 标题来阻止这种行为。这适用于移动设备，因为桌面浏览器在使用鼠标滚轮时支持缩放。这在桌面浏览器上没什么大不了的，但考虑到这一点很重要。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />and the following rule to the CSS stylesheet
以及 CSS 样式表的以下规则
html {
-webkit-text-size-adjust: none;
touch-action: manipulation;
}回答by Nikhil Gowda
This works fine in IOS 10.3.2
这在 IOS 10.3.2 中工作正常
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
}
}, false);
thank you @arthur and @aleclarson
谢谢@arthur 和@aleclarson
回答by Alex Borsody
sometimes those other directives in the contenttag can mess up Apple's best guess/heuristic at how to layout your page, all you need to disable pinch zoom is.
有时content标签中的其他指令可能会破坏 Apple 关于如何布局页面的最佳猜测/启发式方法，您只需禁用捏合缩放即可。
<meta name="viewport" content="user-scalable=no" />
