视口元标记在 iPhone 和 Android 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10783641/
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
Viewport meta tag not working in iPhone and Android
提问by Prabhat
I am using the following html code
我正在使用以下 html 代码
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
test
</body>
</html>
My intention is to prevent user from zooming in or out. The above code isn't working in iPhone and Android. Any solution ?
我的目的是防止用户放大或缩小。上面的代码不适用于 iPhone 和 Android。任何解决方案？
EDIT:It appears in iPhone settings, if Zoomis selected as Onunder Settings>Accessibility>Zoom, then this will override meta tag. Source
编辑：它出现在 iPhone 设置中，如果Zoom被选择为On下Settings>Accessibility>Zoom，那么这将覆盖元标记。来源
Not sure why it is happening in android.
不知道为什么它会在android中发生。
采纳答案by ChristopheCVB
I use this tag to prevent zoom on all mobile platforms :
我使用这个标签来防止在所有移动平台上缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
With ,and not ;
有,与没有;
回答by Joffrey Outtier
In my part, I've this "viewport" which work good on an Android (Nexus 5) and on iPhone.
就我而言，我有这个在 Android (Nexus 5) 和 iPhone 上运行良好的“视口”。
<meta name="viewport" content="width=device-width; initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5; " />
I hope this help you !
我希望这对你有帮助！
回答by neel upadhyay
Put this script to avoid pinch zoom. in latest version of safari, if meta tag not working
放置此脚本以避免捏缩放。在最新版本的 safari 中，如果元标记不起作用
document.documentElement.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
回答by Adam Rifai
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; height=device-height" />
worked well on Samsung Galaxy S3
在三星 Galaxy S3 上运行良好
回答by luckydonald
It seems it doesn't work any longer in the normal iOS (11.3) Browser.
它似乎不再适用于普通的 iOS (11.3) 浏览器。
However it still affects the webpage, if added to the homescreen, and launched from there.
但是，如果添加到主屏幕并从那里启动，它仍然会影响网页。
So if you touch the share menu, select "Add to Home Screen", and open it up from there it will stop you from zooming as expected:
因此，如果您触摸共享菜单，选择“添加到主屏幕”，然后从那里打开它，它将阻止您按预期缩放：
<meta charset="utf-8" />
<title>luckydonald/SelfhostedMouse</title>
<meta name="apple-mobile-web-app-title" content="SelfhostedMouse" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="user-scalable=no; width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0">
回答by Anton Golova
Some time you need to add -webkit-flex:1 to containers (if flexbox in use ofcourse). That is helped me with my viewport problem.
有时您需要将 -webkit-flex:1 添加到容器中（如果使用 flexbox 的话）。这对我的视口问题有所帮助。
