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
Vous devez vous connecter pour publier un commentaire.
MONTAGE FINAL, RÉSOLU
Il n'a rien à voir avec
-webkit-overflow-scrolling
mais plutôt votreheight: 100%
. (Ne sais pas pourquoi je l'ai raté avant).La seule différence entre votre fichier est le
<meta>
tag changements décrits ci-dessous et en commentantheight
dans le CSS.Testé sur iPhone 4S/iOS 5.1.
RÉPONSES ORIGINALES
C'est ce que nous utilisons:
Il fonctionne à chaque fois.
Et nous n'utilisons que des
addEventListener
depuis l'seuls les téléphones nous nous soucions sont basé sur webkit...MODIFIER
Votre
-webkit-overflow-scrolling
div ne devrait pas d'importance ici. Avez-vous essayé de le placer 1 pixel vers le bas sur la page? Peu importe, tout de défilement vers le bas doit juste recouvrir le dessus de pixel de votre position absolue div.MODIFIER
Alors j'ai chargé l'un de vos exemples, et c'est d'apparaître dans la console d'erreur: (cela ne résout pas le problème, mais...)
Regardant votre
<meta>
tag que je vois:Vous devez utiliser un
,
pas un;
Je suis en ajoutant ce parce que j'ai perdu le peu de temps de débogage. La barre de défilement, ne masquer que si la page est plus longue que la fenêtre d'affichage. Si votre page est trop court, et ne peux pas faire défiler, puis ce code ne doit pas masquer la barre d'adresse.
Cela est vrai, aucune raison de le cacher si il n'y a pas de contenu pour faire de la place, mais cela m'a pris quelques minutes pour comprendre pourquoi il a été de travailler sur certaines pages et pas d'autres.
C'est le code de JQM utilise: