web-dev-qa-db-fra.com

Empêcher Mobile Safari de présenter la barre d'outils lorsque le bas de la fenêtre d'affichage est exploité

Nous avons une application mobile simple fonctionnant dans Mobile Safari (MS) sur iOS. Lorsque l'utilisateur fait défiler la page n pixels vers le bas, un bouton "du haut" glisse vers le haut. Le bouton du haut est en position fixe. Le problème, c'est que lorsque vous commencez à faire défiler dans MS, l'interface utilisateur de navigation et de barre d'outils est masquée. Lorsque vous appuyez sur le bouton "Haut", la barre d'outils inférieure est révélée. Un deuxième appui est nécessaire pour appuyer sur le bouton "Haut". Existe-t-il un moyen de désactiver le comportement par défaut "appuyez sur la partie inférieure de la fenêtre pour afficher la barre d'outils" afin que notre bouton du haut fonctionne comme prévu (c'est-à-dire passe au sommet de la page en un clic, pas deux?

iosiphonemobile-safari
28
typeoneerror

Non, il n'y en a pas. Vous pouvez contrôler le contenu de votre page Web mais pas le comportement de l'application Safari. 

16
Mika

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, à moins que vous ne cliquiez 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).

6
Rowan Gontier

Pour iOS 7.1, vous pouvez définir cela dans votre en-tête afin de 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 permis de comprendre le fonctionnement de l'interface minimale: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs

6
Mr. T

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) consiste à forcer la navigation par le bas d'iOS Safari à rester ouverte/visible. De cette façon, les clics au bas de la fenêtre n'ouvrent jamais la navigation du bas car c'est toujours ouvert. 

Pour ce faire, il vous suffit d’appliquer du ciblage CSS et par navigateur avec JS. Étapes détaillées sur comment:

4
jennz0r

Voici comment je traite avec cela. Avec ma propre barre d'outils position:fixed;bottom:0, j'y ajoute un décalage de 44px (avec une zone tampon semi-transparente) peu de temps après que la barre d'outils Safari est masquée (il s'agit du scénario où un tapotement situé près du bas affichera à nouveau la barre d'outils). .

var min_inner_height = false;
var max_inner_height = false;

var passiveIfSupported = false;
try {
    window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: 
function() { passiveIfSupported = { passive: true }; } }));
} catch(err) {}


document.addEventListener('scroll', function(e) {
    var win_inner_h = window.innerHeight;
    if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
        if (min_inner_height === false || win_inner_h < min_inner_height) {
            min_inner_height = win_inner_h;
        }
        if ((max_inner_height === false || win_inner_h > max_inner_height) && win_inner_h > min_inner_height) {
            max_inner_height = win_inner_h;
        }
        if (max_inner_height !== false && max_inner_height == win_inner_h) {
            addElementClass(document.body, 'safari-toolbars-hidden');
        } else {
            removeElementClass(document.body, 'safari-toolbars-hidden');
        }
    }
}, passiveIfSupported);

Cela ajoute essentiellement la classe .safari-toolbars-hidden au <body> à un moment donné lorsqu'elles disparaissent en raison du défilement de la page par l'utilisateur . À ce stade, je déplace ma propre barre d'outils vers le haut de la page:

.my-bottom-toolbar { position: fixed; bottom: 0px; }

@supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */
    .my-bottom-toolbar { transition: bottom 0.15s ease-in-out; box-shadow: 0 44px 0 rgba(255, 255, 255, 0.8); }
    .safari-toolbars-hidden .my-bottom-toolbar { bottom: 44px;  }
}

J'espère que cela aidera quelqu'un! Au lieu de compenser par 44 pixels supplémentaires, vous pouvez également ajouter 44 pixels supplémentaires de remplissage inférieur si cela vous convient mieux.

0
EoghanM