1

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

<!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 中的随机文本大小......）

更新：这是一个实时 URL，供您进行自己的测试。获取它的二维码。

4

0 回答 0