Empêcher Mobile Safari de présenter la barre d'outils lorsque le bas de la fenêtre est tapé
Nous avons une application mobile simple fonctionnant dans Mobile Safari (MS) sur iOS. Lorsque l'utilisateur fait défiler la page N pixels, un bouton "haut" glisse vers le haut à partir du bas. Le bouton du haut est en position fixe. Le problème est que lorsque vous démarrez le défilement dans MS, l'interface utilisateur de navigation et de barre d'outils est masquée. Lorsque vous appuyez sur le bouton" top", il révèle la barre d'outils inférieure et un deuxième robinet est nécessaire pour appuyer sur le bouton" top". Est-il possible de désactiver le "tap" par défaut sur la partie inférieure de la fenêtre pour révéler le comportement de la barre d'outils" donc notre bouton supérieur fonctionne comme prévu (c'est-à-dire saute en haut de la page en un seul clic, pas deux?
4 réponses
Non il n'y en a pas. Vous pouvez contrôler le contenu de votre page web, mais pas le comportement de l'appli safari.
Pour iOS 7.1, vous pouvez définir ceci dans votre en-tête pour minimiser l'interface utilisateur:
<meta name="viewport" content="width=device-width, minimal-ui">
Il a été introduit dans iOS 7.1 beta 2. Ce site m'a aidé à comprendre comment fonctionne minimal-ui: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs
La solution simple ici est d'ajouter environ 50px padding-bottom sur votre fond le plus div. Safari semble penser que vous essayez d'accéder à la barre de navigation inférieure, sauf si vous cliquez bien au-dessus de la zone inférieure. Avec un remplissage supplémentaire en bas, l'utilisateur cliquera beaucoup plus haut sur la page (pas toujours, mais en général).
Mika et typeoneerror sont corrects, mais il existe une solution de contournement.
La meilleure solution de contournement que j'ai trouvée (qui ne nécessite pas minimal-ui) est de forcer la navigation en bas d'iOS Safari à rester toujours ouverte / visible. De cette façon, les clics vers le bas de la fenêtre n'ouvrent jamais la navigation du bas car elle est toujours ouverte .
Pour ce faire, il vous suffit d'appliquer un ciblage CSS et navigateur avec JS. Étapes détaillées sur Comment: