web-dev-qa-db-fra.com

Obtenir la hauteur de la barre d'adresse du navigateur Android Chrome dans JS

Comment obtenir la hauteur de la barre d'adresse en JavaScript dans le navigateur Chrome pour Android (marqué d'un rectangle rouge dans l'image de gauche)? J'ai besoin de savoir que cela disparaît lors du défilement et que je dois réagir à cela car la hauteur de la fenêtre d'affichage est différente.

 enter image description here

Une solution que j'ai déjà trouvée:

  1. Obtenir la hauteur de la fenêtre d'affichage à l'état initial: var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

  2. Obtenir la hauteur de la fenêtre d'affichage lorsque la barre d'adresse a disparu

  3. Calculer la différence entre les deux valeurs

Le problème est que vous devez être dans le second état pour le savoir.

javascripthtmlcssgoogle-chromeandroid-chrome
3
Erando

La meilleure approche pour moi était d’avoir quelque chose comme ça:

$(document).ready(function(){   

var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var isPortrait = viewportHeight > viewportWidth;

$( window ).resize(onresize);

function onresize() {
        var newViewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        var newViewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        var hasOrientationChanged = (newViewportHeight > newViewportWidth) != isPortrait;
        var addressbarHeight = 130;

        if (!hasOrientationChanged && (newViewportHeight != viewportHeight)) {
            addressbarHeight = Math.abs(newViewportHeight - viewportHeight);
            if (newViewportHeight < viewportHeight) {
                // Android Chrome address bar has appeared
            } else {
                // Android Chrome address bar has disappeared
            }
        } else if(hasOrientationChanged) {
            // Orientation change
        }

        viewportHeight = newViewportHeight;
        viewportWidth = newViewportWidth;
        isPortrait = viewportHeight > viewportWidth;
}
});
0
Erando

La chose que vous recherchez est barre de redimensionnement . Depuis le chrome v56 d'Android, David Bokan recommande d'utiliser vh unit sur un téléphone mobile. Il y a une démo dans cet article, clique sur le lien pour obtenir plus d'informations et comment l'utiliser sur mobile.

Lorsque l'utilisateur fait défiler la page, un événement window.resize est déclenché . Vous pouvez mettre à jour votre page en interceptant cet événement avec un écouteur d'événements.

Plus d'informations: mobile chrome déclenche un événement redimensionné lors du défilement

2
Sunchock

Si le même problème se posait aujourd’hui, il n’existe pas de moyen facile de déterminer directement la hauteur de la barre d’URL. Autant que je sache, aucune des variables directement accessibles en javascript ne peut vous dire combien la taille de "100vh" est réellement.

Sur les navigateurs mobiles, 100vh peut ou non inclure la hauteur de la barre d’URL, ce qui nous laisse dans une situation délicate si nous voulons dimensionner une div à la hauteur exacte de la zone de contenu visible du navigateur pendant le chargement.

J'ai trouvé une solution de contournement bien que cela ait fonctionné plutôt bien pour moi, voici ce que j'ai fait:

  1. ajoutez une propriété factice sur votre élément racine html avec une taille de 100vh. Dans mon cas, j'ai utilisé l'attribut "perspective", qui a fonctionné pour moi

  2. alors vous pouvez obtenir la taille de la barre d'adresse avec le code suivant:

    var addressBarSize = parseFloat(getComputedStyle(document.documentElement).perspective) - document.documentElement.clientHeight
0
Qiong Wu

J'avais un conteneur avec un contenu dynamique qui devait toujours avoir au moins toute la hauteur de viewport (et pouvoir défiler si le contenu ne tenait pas à l'écran). 

Donc, si vous avez besoin d'une hauteur fixe, remplacez simplement "min-height" par "height" dans ma solution.

C'est comme ça que j'ai traité avec ça.

// calculate min-height on init
$(".content-container").css("min-height", `${window.innerHeight}px`);

// recalculate the min-height everytime the bar appears or disappears
$(window).resize(() => {
    $(".content-container").css("min-height", `${window.innerHeight}px`);
});

Cela fonctionne pour la barre d'adresse d'Android et aussi pour les barres de safari (dans Safari Mobile, il peut y avoir une barre supérieure et une barre inférieure).

Ensuite, pour rendre la transition lisse, vous pouvez appliquer une règle css:

.content-container{
    transition: min-height 500ms ease;
}
0
Filip Marzec