Question

正如我所理解的那样，有两种可靠的方法可以确定移动显示器上的视口宽度和屏幕宽度。视口宽度是虚拟像素，屏幕宽度是物理像素。这就是应该如何。但这对我来说都是一样的。我已经使用Android 4.0.4的股票浏览器和当前版本的Chrome for Android测试了以下页面（它不会告诉我它的编号）。

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="info"></div>
<script type="text/javascript">
setTimeout(function () {
    var virtualWidth = document.documentElement.clientWidth;
    var physicalWidth = screen.availWidth;

    document.getElementById("info").innerHTML =
        'Virtual width: ' + virtualWidth + '<br>' +
        'Physical width: ' + physicalWidth + '<br>' +
        'Ratio: ' + (physicalWidth / virtualWidth);
}, 500);
</script>
</body>
</html>

结果如下：

股票浏览器报告两个值的540，Chrome报告两者的360。该比率始终为1.我的手机是摩托罗拉RAZR i，其物理宽度应为540（纵向）和1.5的比例。这个页面或方法或浏览器出了什么问题？如果工具完全不可靠，那么移动网页设计真的很难。（我还没有谈到Chrome中的随机文字大小......）

更新：这是live URL，您可以自行进行测试。得到QR code。

在移动显示屏上比较视口和屏幕大小

0 个答案: