web-dev-qa-db-ja.com

jquery mobileはモバイルサファリアドレスバーをどのように非表示にしますか？

JQuery mobileはモバイルサファリのアドレスバーをどのように隠しますか？同様のソリューションが必要だと思いますが、jQuerymobileを使用したくありません...

私は試した：

http://davidwalsh.name/hide-address-bar

しかし、私の場合はうまくいきません。

私の最初の体の子は、-webkit-overflow-scrolling: touchの絶対位置のdivです。

-webkit-overflow-scrollingプロパティはこの問題を引き起こしているようですが、そのプロパティがなくても正常に機能します。

この問題の一部は、ページを片手で下にスクロールしても、アドレスバーが常に前面に表示されることです。これは絶対位置が原因​​です。

しかし、絶対的な位置付けがなければ、「-webkit-overflow-scrolling：touch;」動作しません.。

数千行のjquery-mobileコードとの大きな戦いの後、私はこれで終わりました;）

ソリューション

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <!-- viewport -->
        <meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

        <style type='text/css'>
            body {
                background: #E0E0E0;
                margin: 0;
                padding: 0;
            }

            .page-wrapper {
                width: auto;
            }

            /* native overflow scrolling */
            .mobile-touch-overflow {
                overflow: auto;
                -webkit-overflow-scrolling: touch;
                -moz-overflow-scrolling: touch;
                -o-overflow-scrolling: touch;
                -ms-overflow-scrolling: touch;
                overflow-scrolling: touch;
            }
            .mobile-touch-overflow,
            .mobile-touch-overflow * {
                /* some level of transform keeps elements from blinking out of visibility on iOS */
                -webkit-transform: rotateY(0);
            }

            .page-header {
                display: block;
                background: gray;
                border-bottom: 1px solid #CDCDCD;
                padding: 10px;    
            }

            .page-content {
                padding: 10px;
            }

            .page-footer {
                display: block;
                border-top: 1px solid #CDCDCD;    
                margin-left: 10px;
                margin-right: 10px;
                padding: 10px;
                padding-left: 0;
                padding-right: 0;
                text-align: center;
                font-size: 12px;
                color: #FFF;
            }
        </style>

        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

        <script type="text/javascript">
                /*
                * utils
                */

                var utils = {

                    supportTouchOverflow : function(){
                        return !!utils.propExists( "overflowScrolling" );
                    },

                    supportOrientation : function(){
                        return ("orientation" in window && "onorientationchange" in window);
                    },

                    //simply set the active page's minimum height to screen height, depending on orientation
                    getScreenHeight : function(){
                        var orientation     = utils.getOrientation(),
                            port            = orientation === "portrait",
                            winMin          = port ? 480 : 320,
                            screenHeight    = port ? screen.availHeight : screen.availWidth,
                            winHeight       = Math.max( winMin, $( window ).height() ),
                            pageMin         = Math.min( screenHeight, winHeight );

                        return pageMin;
                    },

                    // Get the current page orientation. This method is exposed publicly, should it
                    // be needed, as jQuery.event.special.orientationchange.orientation()
                    getOrientation : function() {
                        var isPortrait = true,
                            elem = document.documentElement,
                            portrait_map = { "0": true, "180": true };
                        // prefer window orientation to the calculation based on screensize as
                        // the actual screen resize takes place before or after the orientation change event
                        // has been fired depending on implementation (eg Android 2.3 is before, iphone after).
                        // More testing is required to determine if a more reliable method of determining the new screensize
                        // is possible when orientationchange is fired. (eg, use media queries + element + opacity)
                        if ( utils.supportOrientation() ) {
                            // if the window orientation registers as 0 or 180 degrees report
                            // portrait, otherwise landscape
                            isPortrait = portrait_map[ window.orientation ];
                        } else {
                            isPortrait = elem && elem.clientWidth / elem.clientHeight < 1.1;
                        }

                        return isPortrait ? "portrait" : "landscape";
                    },

                    silentScroll : function(ypos) {
                        setTimeout(function() {
                            window.scrollTo( 0, ypos );
                        }, 20 );            
                    },

                    propExists : function(prop) {
                        var fakeBody = $( "<body>" ).prependTo( "html" ),
                            fbCSS = fakeBody[ 0 ].style,
                            vendors = [ "Webkit", "Moz", "O" ],
                            uc_prop = prop.charAt( 0 ).toUpperCase() + prop.substr( 1 ),
                            props = ( prop + " " + vendors.join( uc_prop + " " ) + uc_prop ).split( " " );

                        for ( var v in props ){
                            if ( fbCSS[ props[ v ] ] !== undefined ) {
                                fakeBody.remove();
                                return true;
                            }
                        }
                    },

                    hideAdressbar : function(){
                        if(utils.supportTouchOverflow()){
                            $('.mobile-touch-overflow').height( utils.getScreenHeight() );
                        }
                        utils.silentScroll(1);      
                    }

                };//utils end

                // WINDOW LOAD
                $(window).load(function(){
                    utils.hideAdressbar();      
                });
        </script>
    </head>

    <body>

        <div class="page-wrapper mobile-touch-overflow">
            <header class="page-header">Header</header>
            <div class="page-content">
                <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
                <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
                <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
                <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
                <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
                <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
                <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
                <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
                <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
                <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
                <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
                <br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
            </div>
            <footer class="page-footer">Footer</footer>                
        </div>

    </body>
</html>

正常に動作し、Android 2.1＆iphone4（ios5 +）でテスト済み

このコードには別の問題があり、ここで修正されました： スクロール時にモバイルSafariのアドレスバーを非表示にする（touchOverflow）

jqueryjquery-mobilemobile-safari
16
JensT

これをデバッグするのに時間を無駄にしたので、これを追加します。スクロールバーは、ページがビューポートより長い場合にのみ非表示になります。ページが短すぎてスクロールできない場合、このコードはアドレスバーを非表示にしません。

これは正しいです。スペースを空けるコンテンツがない場合に非表示にする理由はありませんが、一部のページで機能し、他のページでは機能しない理由を理解するのに数分かかりました。

window.addEventListener("load",function() {
    setTimeout(function(){
        window.scrollTo(0, 1);
    }, 0);
});
3
Richard Maxwell

これは、JQMが使用するコードです。

// Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
    silentScroll: function( ypos ) {
        if ( $.type( ypos ) !== "number" ) {
            ypos = $.mobile.defaultHomeScroll;
        }

        // prevent scrollstart and scrollstop events
        $.event.special.scrollstart.enabled = false;

        setTimeout(function() {
            window.scrollTo( 0, ypos );
            $( document ).trigger( "silentscroll", { x: 0, y: ypos });
        }, 20 );

        setTimeout(function() {
            $.event.special.scrollstart.enabled = true;
        }, 150 );
    }
2
codaniel
<meta name="Apple-mobile-web-app-capable" content="yes" />
2
Ikke