Question

我有这个最小的代码：

<!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的nexus 4上加载它时，我的画像高度为519像素，景观高度为311像素 - 我认为这非常正确（屏幕尺寸减去UI等）

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

这是一个众所周知的问题，我是否遗漏了一些简单的问题，有人可以填补我的知识空白吗？

由于

詹姆斯

P.S。刚刚在iPhone 4上测试的Safari也似乎已经关闭，报告了540px的肖像和风景....

Answer 1

你好像缺少html和body元素的分号。

浏览器窗口高度在移动firefox v23上

1 个答案: