Question

我想要一个div来占用移动设备100％的视口。最初我只是将它的高度和宽度设置为100％。

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

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

结果是高度为100％减去浏览器铬高度。此外，javascript通过向下滚动页面足以隐藏chrome，并且只有在页面高于div即时使用时才会发生这种情况。

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

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

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

移动CSS高度100％+浏览器chrome？

1 个答案: