css - 移动 CSS 高度 100% + 浏览器 chrome？

Question

我想要一个 div 占据移动设备视口(viewport)的 100%。最初我只是将它的高度和宽度设置为 100%。

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

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

结果是高度是 100% 减去浏览器 chrome 高度。此外，javascript 的工作原理是将页面向下滚动到足以隐藏 chrome，这只有在页面比我使用的 div 高时才会发生。

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

Answer 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();

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