log*_*lic 7 mobile html5 android viewport ios
我有一个固定宽度的网页(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,页面将不会自动缩小以适合手机..
非常感谢.
log*_*lic 10
在更多地敲击桌子之后,我找到了一个解决方案:
不幸的是,iOS和Android似乎只是表现不同(Android显然没有按照规范所说的忽略最大规模).解决方案是使用JavaScript专门基于解决方案:
如果屏幕宽度(参见下面的注释)大于或(在我的例子640)等于固定的页面宽度,然后视元标记的内容宽度设置为屏幕宽度
否则将视口元标记的内容宽度设置为固定页面宽度(640)
普雷斯托.Lame它需要JavaScript专业化,但这就是生活.
需要注意的是JavaScript的screen.width在iPad/iPhone是不正确如果设备是横向模式(在iPad仍然报告纵向宽度而不是横向宽度,不同于Android的这得到它的权利在这种情况下!).因此,您需要在iPad/iPhone上检查window.orientation并使用screen.height而不是screen.width,如果您在横向.
| 归档时间： |
|
| 查看次数： |
7515 次 |
| 最近记录： |