Comment jquery mobile masque-t-il la barre d'adresse de safari mobile?

Comment jQuery mobile cacher mobile de safari addressbar? Je pense que j'ai besoin d'une solution similaire,
mais je ne veux pas utiliser jQuery mobile ...

J'ai essayé:

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

mais qui ne fonctionne pas dans mon cas.

Mon premier enfant du corps est un absolu placé div
avec -webkit-overflow-scrolling: touch;

La -webkit-overflow-scrolling propriété semble à l'origine de ce problème,
sans cette propriété, il fonctionne très bien.

Partie de ce problème est la barre d'adresse reste toujours au premier plan, même si j'ai faites défiler la page vers le bas par la main. ceci est causé par le positionnement absolu.

Mais, sans positionnement absolu, "-webkit-débordement-défilement: touch;" ne fonctionne pas ...

Après une grosse bagarre avec thousends de lignes de jquery-mobile code, j'ai fini avec cela 😉

Solution

<!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>

fonctionne très bien, testé sur android 2.1 & iphone4(ios5+)

il y a un autre Problème avec ce code, fixe ici:
Masquer la barre d'adresse dans le navigateur Safari mobile lors du défilement (touchOverflow)

source d'informationauteur JensT