Как jQuery mobile скрывает адрес мобильного телефона для сафари?

Как jQuery mobile скрывает адрес мобильного телефона сафари? Я думаю, мне нужно аналогичное решение, но я не хочу использовать jQuery mobile...

Я пробовал:

но это не работает в моем случае.

Мой первый ребенок тела - это абсолютная позиция div с -webkit-overflow-scrolling: touch;

Свойство -webkit-overflow-scrolling, похоже, вызывает эту проблему, без этого свойства он отлично работает.

Часть этой проблемы - адресная строка всегда остается на переднем плане, даже если я прокручиваю страницу за руку. это вызвано абсолютным позиционированием.

Но без абсолютного позиционирования "-webkit-overflow-scrolling: touch;" не работает...

После большого боя с тысячами строк jquery-mobile code, я закончил с этим;)

Решение

<!DOCTYPE html> <html> <head> <title>title</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <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 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"> ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### </div> <footer class="page-footer">Footer</footer> </div> </body> </html>

отлично работает, тестируется в Android 2.1 и iphone4 (ios5 +)

Ответы

Ответ 1

ЗАВЕРШЕНИЕ, РЕШЕНИЕ

Это не имеет никакого отношения к -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-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;">

Вам нужно использовать , не a ;

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

Ответ 2

Я добавляю это, потому что я потратил некоторое время на отладку. Полоса прокрутки будет скрываться только в том случае, если страница больше, чем область просмотра. Если ваша страница слишком короткая и не может прокручиваться, этот код не скрывает адресную строку.

Это правильно, нет причин скрывать, если нет свободного места для контента, но мне понадобилось пару минут, чтобы понять, почему он работал на некоторых страницах, а не на других.

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

Ответ 3

Это код 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 );
    }

Ответ 4

<meta name="apple-mobile-web-app-capable" content="yes" />