3

我有这个最小的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width height=device-height">
    <title>test</title>
    <style>
        html, body {
          height: 100%
        }
        #container {
        height: 100%;
        background-color: #0f0;  
        }
    </style>
</head>

<body>
    <div id="container">&nbsp;</div>
</body>
    <script type="text/javascript">
        alert(window.getComputedStyle(document.getElementById('container')).height); 
    </script>
</html>

在服务器上：

http://catplusplus.org.uk/catpsite/portfolio/test.html

所以这段代码会提醒容器 div 的高度，它应该是浏览器窗口的 100%。

我在标题中包含了 meta-viewport 标签，它应该确保移动缩放设置为 1:1 像素。

当我在 Chrome 上运行 android 的 LG nexus 4 上加载它时，纵向高度为 519 像素，横向高度为 311 像素 - 我认为这非常正确（屏幕尺寸减去 UI 等）

当我使用 Firefox (v23) 在同一部手机上加载它时，纵向高度为 1134 像素，横向高度为 718 像素，这似乎是错误的。

这是一个已知问题吗，我是否遗漏了一些简单的东西，有人可以在这里填补我的知识空白吗？

谢谢

詹姆士

ps 刚刚在 iPhone 4 上的 Safari 上测试过似乎也关闭了，报告纵向和横向均为 540 像素....

4

0 回答 0