Comment calculer la hauteur de la zone visible (c'est à dire, à la hauteur de la fenêtre moins une adresse & signet bars) dans le navigateur Safari mobile web app?
Quelle est la bonne façon de calculer combien d'espace visible est disponible sur le navigateur Safari mobile? Par la zone de visualisation, nous entendons la quantité de l'écran effectivement disponibles pour une application web, qui est la hauteur de la fenêtre, moins l'adresse et signet bars.
iOS 7 empêche le masquage de la barre d'adresse, et nous devons nous rendre compte correctement de la fenêtre d'affichage de la hauteur.
OriginalL'auteur Crashalot | 2013-09-26
Vous devez vous connecter pour publier un commentaire.
window.innerWidth
etwindow.innerHeight
donnera la largeur et la hauteur de la fenêtre d'affichage.Sur mon iPhone 4S sous iOS 7.0.2,
window.screen.availHeight
donne 460. C'est-à 480px moins la hauteur de la barre d'état. Avec à la fois la barre d'adresse et la barre d'onglet visible,window.innerHeight
est de 373. Si je puis faites défiler jusqu'à minimiser la barre d'adresse et de masquer la barre d'onglets,window.innerHeight
rapports 441.Hmm, quelle est la valeur que vous obtenez lorsque vous accédez à cette page: tekiki.com/default/test? Nous obtenons 1109. Le code de la page entière est ceci: <script type='text/javascript'> setTimeout( function() { alert( window.innerHeight ); }, 500 ); </script>
Ajoutez à cela l'élément de tête: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">, et vous obtiendrez 372.
window.screen.availHeight
retourne 548 sur iphone5S/ios7.0.3 avec ou sans la barre d'outils et taille de barre d'adresse ;window.innerHeight
retourne 529 initialement et 460 après le défilement.OriginalL'auteur
Je sais que c'est 5 ans post, mais ce problème persiste encore que je peux dire. Ma solution:
L'utilisation d'un Élément HTML de la page qui est mise en forme avec CSS:
.el{ height:100vh; }
et de récupérer de la hauteur en pixel de Javascript en utilisant jQuery:$('.el').height();
Si vous n'avez pas pratique à utiliser pour un élément, vous pouvez en créer un à la volée dans le seul but de masuring la fenêtre d'affichage:
OriginalL'auteur