iphone - 如何使用 CSS 在 iPhone 上最大化 webapp 高度？ (正确隐藏 URL 栏)

Question

这是我的问题。在 iPhone 上，如何将容器/视口(viewport)设置得足够高以隐藏 URL 栏，但仍不高于可用文档区域。

如果我只是将容器(也有 overflow: hidden)设置为 height: 100%，结果如下: http://img193.imageshack.us/img193/9041/img0027g.png

即。容器仅变为可见文档区域的高度。但是，隐藏 URLbar 要求文档至少与可用文档区域一样高(URLbar 向上滚动)。

这就是我所追求的: http://img844.imageshack.us/img844/2613/img0029nv.png

我知道我可以使用 JavaScript(innerWindow 高度)来做到这一点，但我更喜欢纯 CSS 解决方案。

Answer 1

强制最小高度以便页面可以滚动

body[orient="portrait"] { min-height:540px; }
body[orient="landscape"] { min-height:400px; }

或者，如果它是主屏幕上的网络应用程序，那就更简单了。

<meta name="apple-mobile-web-app-capable" content="yes" />