Question

我正在制作一个具有“全屏模式”的网页。它是一个普通的网页，直到您单击一个按钮，然后创建一个具有100％高度和宽度的div，并隐藏旧内容。全屏模式提供另一个按钮以返回非全屏模式，该模式隐藏div并取消隐藏原始内容。

这很好用，除了我还想用这个JavaScript方法隐藏浏览器chrome：

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

JavaScript向下滚动页面足以使浏览器镶边不再可见。问题是这需要页面比视口高，所以它能够滚动。如果内容的高度为100％，则不会发生这种情况。

我目前的解决方法是在全屏div的底部添加70px的填充。这适用于iPhone，但随后将这个不必要的间距添加到所有设备。这可能会破坏我想要的全屏效果，并在dektop浏览器中创建不必要的滚动条。

有聪明的工作吗？或者我是否需要检测浏览器镀铬高度或检测设备，并相应地添加此填充？

谢谢

Answer 1

最好的方法是为设备及其方向编写专用的css。

您可以看到媒体查询以检测设备的方向，并根据该设置设置css。

<link rel="stylesheet" type="text/css" href="ipad.css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)" />

隐藏栏使用此脚本：

if (navigator.userAgent.indexOf('iPhone') != -1) {
        addEventListener("load", function() {
        setTimeout(hideURLbar, 0);
        }, false);
        }

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

iPhone全屏网页头疼

1 个答案: