Android 视口设置“user-scalable=no”打破了视口的宽度/缩放级别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12723844/
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
Android viewport setting "user-scalable=no" breaks width / zoom level of viewport
提问by Horen
I am working on a web app which has a width of 640px.
我正在开发一个宽度为 640 像素的网络应用程序。
In the document headI set
在head我设置的文档中
<meta name="viewport" content = "width=640, user-scalable=no" />
so the content is nicely displayed and stretched horizontally.
This works perfectly on iOS but in Android the browser opens the website zoomed in so the user has to double click to zoom out and the entire page.
所以内容很好地显示和水平拉伸。
这在 iOS 上非常有效，但在 Android 中，浏览器会打开放大的网站，因此用户必须双击缩小整个页面。
When I change the viewport setting to leave out the user-scalabletag like this:
当我更改视口设置以省略这样的user-scalable标签时：
<meta name="viewport" content="width=640" />
the Android browser adjusts nicely to the 640px - so it works.
The problem however now is, that users can zoom in and out on Android and iOS since the user-scalabletag is not set.
Android 浏览器可以很好地调整到 640 像素 - 所以它可以工作。
然而现在的问题是，由于user-scalable未设置标签，用户可以在 Android 和 iOS 上放大和缩小。
How can I forbid the scaling and at the same time set the viewport width to 640px on Android?
如何在 Android 上禁止缩放并同时将视口宽度设置为 640px？
回答by Ben Sewards
Trying rendering the viewport meta tag like so:
尝试像这样渲染视口元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Setting scale settings will set user restrictions on how far they can zoom, and so if you set the initial and maximum to the same amount, this should fix the problem.
设置比例设置将设置用户对他们可以缩放多远的限制，因此如果您将初始值和最大值设置为相同的量，这应该可以解决问题。
UPDATE: I was able to fix my bug for android devices all together by setting the below:
更新：通过设置以下内容，我能够一起修复我的 android 设备错误：
<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />
I also noticed that some content, such as p tags were not flowing across the screen, so the hack for that would be to add the background-image property with empty string to any content that is stuck and is not going across the layout view. Hope this helps this time for you.
我还注意到一些内容，比如 p 标签没有流过屏幕，所以解决这个问题的方法是将带有空字符串的 background-image 属性添加到任何卡住且不会穿过布局视图的内容中。希望这对你有帮助。
回答by pkmelee337
I wanted mobile to always show a website 640px wide because of a design that would break otherwise. (a design I did not make..) Thereby I wanted to disable zooming for mobile users. What worked for me me is the following:
我希望移动设备始终显示 640 像素宽的网站，因为否则会破坏设计。（我没有做的设计..）因此我想禁用移动用户的缩放功能。对我有用的是以下内容：
- UPDATED 2013-10-31
- 更新 2013-10-31
First of all, there is no way you can do this without Javascript. You will have to check the user agent string. Therefore I created a mobile-viewport.js and included the script just before the closing tag:
首先，如果没有 Javascript，你就无法做到这一点。您必须检查用户代理字符串。因此，我创建了一个 mobile-viewport.js 并在结束标记之前包含了脚本：
function writeViewPort() {
var ua = navigator.userAgent;
var viewportChanged = false;
var scale = 0;
if (ua.indexOf("Android") >= 0 && ua.indexOf("AppleWebKit") >= 0) {
var webkitVersion = parseFloat(ua.slice(ua.indexOf("AppleWebKit") + 12));
// targets android browser, not chrome browser (http://jimbergman.net/webkit-version-in-android-version/)
if (webkitVersion < 535) {
viewportChanged = true;
scale = getScaleWithScreenwidth();
document.write('<meta name="viewport" content="width=640, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + '" />');
}
}
if (ua.indexOf("Firefox") >= 0) {
viewportChanged = true;
scale = (getScaleWithScreenwidth() / 2);
document.write('<meta name="viewport" content="width=640, user-scalable=false, initial-scale=' + scale + '" />');
}
if (!viewportChanged) {
document.write('<meta name="viewport" content="width=640, user-scalable=false" />');
}
if (ua.indexOf("IEMobile") >= 0) {
document.write('<meta name="MobileOptimized" content="640" />');
}
document.write('<meta name="HandheldFriendly" content="true"/>');
}
function getScaleWithScreenwidth() {
var viewportWidth = 640;
var screenWidth = window.innerWidth;
return (screenWidth / viewportWidth);
}
writeViewPort();
The script checks if the visitor has an android (not chrome) or firefox browser. The android browser does not support the combination of width=640 and user-scalable=false, and the firefox browser does have a double screen width for some strange reason. If the visitor has a windows phone IE browser MobileOptimized is set.
该脚本会检查访问者是否使用 android（不是 chrome）或 firefox 浏览器。android浏览器不支持width=640和user-scalable=false的组合，firefox浏览器由于一些奇怪的原因确实有双屏宽度。如果访问者有 Windows Phone IE 浏览器，则设置为 MobileOptimized。
回答by Nitin
I had the same situation, if you want the content to always fit the screen width without allowing the user to zoom in/out, use the following meta tags (this will work no matter what width you give)
我遇到了同样的情况，如果您希望内容始终适合屏幕宽度而不允许用户放大/缩小，请使用以下元标记（无论您提供什么宽度，这都可以）
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
