Question

我一直在阅读Stack Overflow并在Google上搜索一个可靠的方法来隐藏iOS 7上的工具栏，因为旧的滚动技巧已不再适用。

基于此：http://mihhaillapushkin.wordpress.com/2014/01/20/stop-navigation-bars-from-appearing-in-iphone-ios7-safari/

我尝试了以下内容：

<!doctype html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <style type="text/css">

            *
            {
                padding: 0;
                border: 0;
                outline: 0;
                margin: 0;
            }

            html,
            body
            {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            div.content
            {
                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                width: 320px;
                height: 480px;
                background: orange;
            }

            #scroller {
                height: 100%;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                overflow: scroll;
                -webkit-overflow-scrolling: touch;
                width: 100%;
            }

        </style>
    </head>
    <body class="default">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        <script>

            setInterval(function(){

                if((window.orientation == 90 || window.orientation == -90) && window.innerHeight != window.outerHeight) {

                    $('#scroller').show();

                } else {

                    $('#scroller').hide();

                }

            }, 1000);

        </script>

        <div class="content">

            <div id="scroller" style="z-index: 100000;position: fixed;top:0;left:0;right:0;bottom:0;">
                Scroll up!
            </div>

        </div>

    </body>
</html>

但是向上滚动实际上并没有隐藏滚动条。 #scroller隐藏并显示工具栏是否可见，因此其中一半有效，但除非我将内容反弹到工具栏中，否则不会隐藏，但如果我滚动则工具栏会再次显示。

我是否误解了实施？

Answer 1

如果要隐藏Safari地址栏，则需要添加此元标记

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

使用此元标记

可以在iOS 7.1及更高版本中隐藏状态栏

<meta name="viewport" content="minimal-ui”>

Answer 2

好的，这是作者的答案。

我没有潜入你的代码块，只是为了澄清我在那篇文章中所说的内容。

首先，我展示了一个采用叠加层的游戏示例，该叠加层强制玩家向上滚动直到栏杆消失。在游戏检测到栏不再可见后，它会锁定滚动，直到玩家再次触发导航栏，迫使他再次通过循环。

其次，我已经揭示了一个技巧，由于某种原因，取消导航栏仅触发屏幕的顶部。底部仍像往常一样触发它们，因此我仍然需要前面提到的叠加层。因此，这是问题的半解决方案，但它仍然比没有好。

恕我直言，这两种方法的结合为游戏和其他需要全屏而无需滚动的应用程序提供了足够好的解决方案。

使用overlay hack隐藏iOS 7中的工具栏

2 个答案: