使用固定宽度视口元标记时，Android 会忽略最大比例
我有一个固定宽度的网页（640 像素宽）。我希望此页面缩小到移动设备的宽度。但是，如果设备的本机宽度大于 640 像素，我不希望它被拉伸。看起来很简单：
<meta name="viewport" content="width=640, maximum-scale=1.0" />
这在 iPad/iPhone 中按预期工作。然而，在 Android 平板电脑上（例如横向模式），内容会放大以适合显示屏。换句话说，Android 只是忽略了 Maximum-scale=1 。您可以在此处查看出现问题的示例页面。为了完整起见，这里是来源：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Viewport</title>
<meta name="viewport" content="width=640, maximum-scale=1.0" />
<style>
div.bar {
position: absolute;
width: 636px;
height: 50px;
background-color: yellow;
border: 2px solid black;
left: 50%;
margin-left: -320px;
}
</style>
</head>
<body>
<div class="bar">
</div>
</body>
</html>
我一直在使用视口元标记进行大量研究和实验。我已经阅读了有关该主题的所有内容，但还没有看到提到这个看似基本的问题。
两个注意事项：
这不是目标密度 dpi 问题
在这种情况下将视口宽度设置为设备宽度没有帮助，因为内容宽度是固定的并且大于（例如）手机的纵向设备宽度。如果我设置 width=device-width，页面将不会自动缩小以适应手机。
非常感谢。
I have a fixed-width web page (640 pixels wide). I would like this page to shrink to the width of a mobile device. However, if the device's native width is larger than 640 pixels, I do not want it stretched. Seems simple enough:
<meta name="viewport" content="width=640, maximum-scale=1.0" />
This works as expected in iPad/iPhone. However, on an Android tablet (ex. in landscape mode), the content gets scaled up to fit the display. In other words, Android is simply ignoring maximum-scale=1 . You can see an example page with the problem here. For the sake of completeness here is the source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Viewport</title>
<meta name="viewport" content="width=640, maximum-scale=1.0" />
<style>
div.bar {
position: absolute;
width: 636px;
height: 50px;
background-color: yellow;
border: 2px solid black;
left: 50%;
margin-left: -320px;
}
</style>
</head>
<body>
<div class="bar">
</div>
</body>
</html>
I've been doing a lot of researching and experimentation with the viewport meta-tag. I've read just about everything on the topic, but haven't seen this seemingly basic issue mentioned.
Two notes:
This is not a target-densitydpi issue
Setting the viewport width to device-width is not helpful in this case because the content width is fixed and larger than (for example) a phone's portrait device width. If I set width=device-width, the page will not automatically be scaled down to fit the phone..
Thanks much.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
经过更多的头撞桌子后，我找到了一个解决方案：
不幸的是，iOS 和 Android 的行为似乎不同（Android 显然没有按照规范所说的那样忽略最大规模）。解决方案是使用 JavaScript 根据分辨率进行专门化：
如果屏幕宽度（请参阅下面的注释）大于或等于固定页面宽度（在我的示例中为 640），则将视口元标记的内容宽度设置为屏幕宽度
Else设置视口元标记的内容宽度为固定页面宽度 (640)
Presto。遗憾的是它需要 JavaScript 专门化，但这就是生活。
请注意，如果设备处于横向模式，iPad/iPhone 上的 Javascript screen.width 是不正确的（iPad 仍然报告纵向宽度而不是横向宽度，与 Android 不同，在这种情况下它是正确的！ ）。因此，您需要在 iPad/iPhone 上检查 window.orientation 并使用 screen.height 而不是 screen.width（如果您位于景观。
After more banging my head against a table, I have found a solution:
Unfortunately it seems that iOS and Android simply behave differently (Android is very clearly not doing what the spec says by ignoring maximum-scale). The solution is to specialize based on resolution using JavaScript:
If the screen width (see note below) is greater than or equal to the fixed page width (640 in my example), then set the viewport meta-tag's content width to the screen width
Else set the viewport meta-tag's content width to fixed page width (640)
Presto. Lame that it requires JavaScript specialization, but such is life.
Note that the Javascript screen.width on iPad/iPhone is incorrect if the device is landscape mode (the iPad still reports the portrait width instead of the landscape width, unlike Android which gets it right in this case!). Therefore, you'll need to check window.orientation on iPad/iPhone and use screen.height instead of screen.width if you are in landscape.
我宁愿使用
而不仅仅是最大比例属性......
目标密度Dpi属性是Android特有的，也许它可以解决你的问题。
I'd rather use
Instead of just the Max scale property...
The target-densityDpi property si Android specific, maybe it can fix your problem.