手机CSS高度100％+浏览器chrome？

我想要一个div占据移动设备100％的视口。最初我只是将它的高度和宽度设置为100％。手机CSS高度100％+浏览器chrome？

但是现在我躲在chrome浏览器具有以下JavaScript：

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

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

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

来源

2012-03-14 Evans

如果我没有错你的问题主要与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和scroll事件。

来源

2012-03-19 17:54:36 Davide

是的，我暂时关注iPhone，因为我还没有Android测试。您的解决方案是否考虑到只有顶级浏览器铬可隐藏的事实？带后退和前进按钮的底部镀铬物不能隐藏。谢谢 – Evans 2012-03-20 10:36:47

它需要考虑地址栏和最终的开发者吧，是的。如果您将网站保存为主屏幕应用，则底部导航栏可以隐藏起来，甚至在这种情况下它也可以工作。 – Davide 2012-03-20 10:58:30

什么是开发者吧？我知道，如果用户使用元标记将网站保存到主屏幕，则可以隐藏所有浏览器镶边，但我不认为我的用户会这样做。 – Evans 2012-03-20 11:04:04

手机CSS高度100％+浏览器chrome？

回答

相关问题