移动浏览器的意外视口大小答案

【问题标题】：Unexpected viewport size for mobile browser移动浏览器的意外视口大小
【发布时间】：2015-03-04 11:15:35
【问题描述】：

我正在使用以下代码为各种移动浏览器测试不同的视口大小：

<!DOCTYPE html>
<html>
<head>
    <title>Browser details</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <script type="text/javascript" language="javascript">
        window.onload = function (e) {
            var width = document.getElementById("width");
            var height = document.getElementById("height");

            var w = window.innerWidth;
            var h = window.innerHeight;

            width.innerHTML = w;
            height.innerHTML = h;

        }
    </script>
</head>
<body>
<div id="">Viewport Width x Height : <span id="width"></span> x <span id="height"></span></div>
</body>
</html>

我在 Samsung Galaxy S4 GT-I9500 上测试了我的代码。不同Android浏览器的输出是：

谷歌浏览器：360 x 559

Mozilla 火狐：980 x 480

默认浏览器：360 x 592

为什么 Mozilla firefox 的差异如此之大？我预计输出应该在 360 X 5-- 左右（500 ..something）

【问题讨论】：

标签： javascript android html

【解决方案1】：

尝试使用 jquery 代替；

var height = $(window).height();
var width = $(window).width();

【讨论】：

这是一回事，唯一的区别是我尝试使用 JavaScript 而不是 jQuery；即使我使用 jQuery，结果也是一样的。
尝试使用相同的脚本，但不使用`window.onload = function (e) {`，因为firefox可能会在执行元代码之前执行你的代码