移动 CSS 高度 100% + 浏览器 chrome？答案

【问题标题】：Mobile CSS height 100% + browser chrome?移动 CSS 高度 100% + 浏览器 chrome？
【发布时间】：2012-03-20 01:54:36
【问题描述】：

我希望 div 占据移动设备 100% 的视口。最初我只是将它的高度和宽度设置为 100%。

但是现在我使用以下 JavaScript 隐藏浏览器 chrome：

setTimeout(function() { 
window.scrollTo(0, 1) }, 
100);

结果是高度为 100% 减去浏览器 chrome 高度。此外，javascript 通过向下滚动页面足以隐藏 chrome 来工作，并且只有当页面比我使用的 div 高时才会发生这种情况。

我该如何解决这个问题？是使用设备检测并在每个设备的基础上添加浏览器 chrome 高度值（以像素为单位）的唯一方法吗？如果可能的话，我想避免这种情况。谢谢

【问题讨论】：

标签： css mobile fullscreen

【解决方案1】：

如果我没记错的话，您的问题主要与 Safari iPhone 有关。

最简单的解决方案可能是每隔设置的时间间隔检查页面高度的变化，并相应地更改容器的高度。根据我的经验，没有任何 CSS 解决方案有效

var prevPageHeight = 0;

function setHeight() {
    $('#container').height( window.innerHeight );
    prevPageHeight = window.innerHeight;
}

setInterval( function() {
  if ( window.innerHeight != prevPageHeight ) {
    setHeight();
  }
}, 500);

setHeight();

此解决方案还考虑了方向变化。我很确定它可以很容易地优化将函数绑定到orientationChange和滚动事件。

【讨论】：

是的，我目前专注于 iPhone，因为我还没有 Android 可以测试。您的解决方案是否考虑到只能隐藏顶部浏览器 chrome 的事实？带有后退和前进按钮等的底部镀铬无法隐藏。谢谢
它考虑了地址栏，最终考虑了开发者栏，是的。如果您将网站保存为主屏幕应用程序，则可以隐藏底部导航栏，即使在这种情况下它也可以工作。
开发者栏是什么？我知道如果用户使用元标记将网站保存到主屏幕，可以隐藏所有浏览器镶边，但我认为我的用户不会这样做。
开发者栏可以在设置 - Safari - 高级 - 调试控制台下启用（在iOS5上，在iOS4上有点不同）。它出现在地址栏的正下方，并显示一般错误和您的 console.log()s。