个人中心
gpt4 book ai didi

jquery - jquery mobile如何隐藏mobile safari地址栏？

转载 作者：行者123 更新时间：2023-12-03 21:58:27 25 4
gpt4 key购买 nike

jQuery mobile 如何隐藏 mobile safari 的地址栏？我想我需要一个类似的解决方案，但我不想使用 jQuery mobile ...

我尝试过:

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

但这对我来说不起作用。

我的 body 的第一个子元素是绝对定位的 div与 -webkit-overflow-scrolling: touch;

-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+) 中测试

此代码还有另一个问题，已在此处修复: Hide address bar in mobile Safari when scrolling (touchOverflow)

最佳答案

最终编辑，已解决

与-webkit-overflow-scrolling无关，而是你的height: 100% 。 (不知道为什么我之前错过了)。

您的文件之间的唯一区别是 <meta>下面列出了标签更改并注释掉 height在 CSS 中。

在 iPhone 4S/iOS 5.1 上测试。

<小时/> 原始回复

这就是我们使用的:

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

每次都有效。

我们只使用addEventListener因为我们唯一关心的手机是基于 webkit 的......

<小时/> 编辑

您的-webkit-overflow-scrolling div 在这里应该不重要。您是否尝试过将其放置在页面下方 1 像素？无论如何，任何向下滚动都应该只覆盖绝对定位的 div 的顶部像素。

<小时/> 编辑

所以我加载了您的示例之一，并且在错误控制台中弹出了以下内容:(这并不能解决问题，但是...)

Viewport argument value "device-width;" for key "width" not recognized. Content ignored.
/dev/1/:7Viewport argument value "1.0;" for key "initial-scale" was truncated to its numeric prefix.
/dev/1/:7Viewport argument value "1.0;" for key "maximum-scale" was truncated to its numeric prefix.

看看你的<meta>我看到的标签:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

您需要使用 ,不是; 

<meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

关于jquery - jquery mobile如何隐藏mobile safari地址栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9798158/

25 4 0
文章推荐： jquery - 推荐一个简单的jquery对话框示例？
文章推荐： jQuery:选择不是某个类的后代的所有元素
文章推荐： jquery - 将 jQuery 加载到 chrome-extension 中
文章推荐： jquery .html() 不适用于 ie8
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com