网站的最低高度

Question

当我访问网站时，当我的iphone上的地址栏消失时，我喜欢它。这可以通过最小高度来完成。我试着用css做一个正确的方法。

如果我使用它，那么它会很好，除非我发现这对其他手机不友好（现在价值有点极端......）：

body {
    min-height: 9000px;
}

如果我使用它，那么它不起作用。

body {
    min-height: max-device-height;
}

处理这个问题的好方法是什么？

Answer 1

我会使用这个javascript：

var height = screen.availHeight;
element.style.setAttribute("min-height",  height + 'px', false);

对于元素你必须使用你想要设置的元素......

Answer 2

您可以使用max-device-height，但仅限于媒体查询，例如：

仅@media屏幕和（max-device-height：500px）{     最小高度：500px;   }

（此处更多示例：http://mislav.uniqpath.com/2010/04/targeted-css/）

然而，对所有手机执行此操作需要很多规则。

我认为最好设置html, body {min-height: 100%;}。该规则将尝试使最小高度为窗口高度的100％。可能地，只有当大小大于普通视口时，地址栏才会消失。在这种情况下，您可能需要一个稍大的值，例如101％或110％，这肯定不如9000px极端。