Как jquery mobile скрывает адресную строку мобильного сафари?
Как jQuery mobile скрывает адресную строку мобильного сафари? Я думаю, что мне нужно подобное решение, но я не хочу использовать jQuery mobile ...
Я старался:
http://davidwalsh.name/hide-address-bar
но это не работает в моем случае.
Мой первый ребенок тела - это абсолютный 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+)
была еще одна проблема с этим кодом, исправленная здесь: скрыть адресную строку в мобильном Safari при прокрутке (touchOverflow)
4 ответа
ОКОНЧАТЕЛЬНОЕ РЕДАКТИРОВАНИЕ, РЕШЕНО
Это не имеет ничего общего с -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" />
Я добавляю это, потому что я потратил некоторое время на отладку этого. Полоса прокрутки будет скрыта, только если страница длиннее области просмотра. Если ваша страница слишком короткая и не может прокручиваться, то этот код не скрывает адресную строку.
Это правильно, нет причин скрывать, если нет содержимого, чтобы освободить место, но мне понадобилось несколько минут, чтобы понять, почему оно работает на некоторых страницах, а не на других.
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
Это код, который использует 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 );
}