问题描述
我有一个固定宽度的网页（宽640像素）。我想这个页面缩小到移动设备的宽度。然而，如果设备的本机宽度大于640像素，我不希望它拉伸。似乎很简单：
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" />
这工作正常在iPad / iPhone的。然而，在Android平板电脑（例如在横向模式下），内容被放大到适合显示。换句话说，机器人被简单地忽略最大尺度= 1。你可以看到一个例子页面，在 这里问题。为了在这里完整性是源：
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.
有两点需要注意：
-
这是不是一个目标densitydpi问题
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..
谢谢了。
推荐答案
经过敲我的头靠在桌子，我已经找到了解决办法：
After more banging my head against a table, I have found a solution:
不幸的是，似乎iOS和Android简单的理解不同（安卓很显然不是做什么的规范说忽略最大规模）。该解决方案是专门基于使用JavaScript解析：
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:
-
如果屏幕宽度（见下面的注释）大于或等于固定页面宽度（在我的例子640），然后将视区元标记的内容宽度与屏幕宽度
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
否则设置视区元标记的内容宽度以固定的页面宽度（640）
Else set the viewport meta-tag's content width to fixed page width (640)
preSTO。欲盖弥彰，它需要JavaScript专业化，但生活就是这样。
Presto. Lame that it requires JavaScript specialization, but such is life.
注意，Javascript的 screen.width 在iPad / iPhone是不正确如果设备是横向模式（在iPad仍然报告的纵向宽度而不是横向宽度，不像安卓它得到正确的这个案例！）。因此，你需要检查 window.orientation 在iPad / iPhone和使用 screen.height 而不是 screen.width 如果您在景观。
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.
这篇关于Android的忽略使用固定宽度视区元标记时，最大规模的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！