我有一个宽度固定为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>
我一直在对viewport meta标签进行研究和实验。我已经阅读了关于此主题的几乎所有内容,但似乎没有提到这个看起来基本的问题。
两点说明:
这不是一个target-densitydpi问题
将viewport宽度设置为device-width在这种情况下并不有用,因为内容宽度是固定的,比(例如)手机纵向设备宽度更大。如果我将width=device-width设置为页面宽度,则页面不会自动缩小以适应手机屏幕。