web-dev-qa-db-fra.com

Calcul de la hauteur de la fenêtre d'affichage sur Chrome Android avec CSS

J'ai donc remarqué que mobile Chrome calcule la barre d'adresse dans la hauteur de la fenêtre d'affichage. Pour cette raison, en utilisant height: 100vh sur un élément ne fonctionne pas car lorsque la barre d'adresse défile, la hauteur de la fenêtre change.

J'ai en fait pu trouver une question qui avait le même problème ici sur iOS, mais après avoir approfondi mes recherches, j'ai réalisé que cela se produit sur tous les navigateurs mobiles Chrome navigateurs. Lorsque le la barre d'adresse défile hors de la fenêtre, puis à nouveau lors du défilement dans la fenêtre, la hauteur de la fenêtre change.

Cela provoque tout élément utilisant vh à recalculer ce qui fait sauter la page. C'est extrêmement ennuyeux lorsque vous utilisez une image d'arrière-plan, car elle redimensionne l'image lors du défilement.

Voici le code et n exemple

   .jumbotron {
        background-image: url(http://example.com/image.png);
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        height: 100vh;
    }

Vous ne pourrez voir le problème que lorsque vous faites défiler vers le haut ou vers le bas à l'aide de Chrome mobile.

Ma question est , je voudrais savoir s'il existe un moyen de contourner cela ou sinon comment calculer la hauteur totale sur mobile chrome sans faire sauter la page (css ou js).

http://s.codepen.io/bootstrapped/debug/qadPkz

Mise à jour: En ce qui concerne l'utilisation de jquery, voici ce que j'ai trouvé qui fonctionne plutôt bien:

function calcVH() {
    $('.jumbotron').innerHeight( $(this).innerHeight() );
}
$(window).on('load resize orientationchange', function() {
  calcVH();
});

Démo de l'exemple de travail ci-dessus

J'adorerais pouvoir le faire sans javascript, cependant, si quelqu'un a une alternative CSS qu'il sait fonctionner.

cssgoogle-chromemobilebackground-imageviewport
14
Bryan Willis

Voici ce que je suis allé avec:

[~ # ~] html [~ # ~] 

<div id="selector"></div>

[~ # ~] css [~ # ~] 

#selector {
   height: 100vh;
}

[~ # ~] jquery [~ # ~] 

function calcVH() {
    $('#selector').innerHeight( $(this).innerHeight() );
}
(function($) { 
  calcVH();
  $(window).on('orientationchange', function() {
    calcVH();
  });
})(jQuery);

PURE JS (PAS DE JQUERY) 

function calcVH() {
  var vH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  document.getElementById("selector").setAttribute("style", "height:" + vH + "px;");
}
calcVH();
window.addEventListener('onorientationchange', calcVH, true);

Changez simplement #selector quel que soit votre sélecteur css. Si vous utilisez la version pure js, vous devez utiliser un ID, sauf si vous modifiez .getElementByID à .getElementsByClassName .

Je ne suis conscient que de ce problème dans Mobile Chrome Android, mais je suppose que c'est la même chose pour Chrome iOS également. Vous pourriez facilement ajoutez une option mobile detect si vous le souhaitez, cela ne fonctionne que lorsque vous en avez besoin. Personnellement, j'utilise Detectizr qui fonctionne bien, mais pour être honnête, car il est assez léger car c'est, ajouter quelque chose comme ça ne vaut probablement pas la peine, sauf si vous l'utilisez déjà.

J'espère que cela sera bientôt corrigé, donc une solution javascript n'est pas nécessaire. En outre, j'ai essayé d'ajouter l'événement de redimensionnement au cas où la largeur du navigateur se redimensionnerait, mais après avoir vu cette question, je l'ai supprimé de ma réponse. Si vous voulez essayer de les utiliser, changez simplement ce qui précède pour:

[~ # ~] jquery [~ # ~] 

function calcVH() {
    $('#selector').innerHeight( $(this).innerHeight() );
}
(function($) { 
  calcVH();
  $(window).on('orientationchange resize', function() {
    calcVH();
  });
})(jQuery);

$(window).on('resize orientationchange', function() {

PURE JS (PAS DE JQUERY) 

function calcVH() {
  var vH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  document.getElementById("selector").setAttribute("style", "height:" + vH + "px;");
}
calcVH();
window.addEventListener('onorientationchange', calcVH, true);
window.addEventListener('resize', calcVH, true);
11
Bryan Willis

J'ai essayé toutes les suggestions ... mais rien ne fonctionne pour moi. Soit avec Chrome ou IOS.

Mais alors ... j'ai eu une idée!

1. Vous pouvez laisser l'entrée standard dans la tête

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

2. Écrivez un JS dans le pied (assurez-vous que jQuery connaît vos éléments) du site par exemple

<script type="text/javascript" charset="utf-8">
  (function() {
    function size() {
      // you can change here what you prefer
      if (/Android|webos|iphone|ipad|iPod|blackberry|nokia|opera mini|opera mobi|skyfire|maemo|windows phone|Palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
        var theminheight = Math.min(document.documentElement.clientHeight, window.screen.height, window.innerHeight);
        //now apply height ... if needed...add html & body ... i need and i use it
        $('html body #yourelementofchoise').css('height', theminheight);
      }
    }
    window.addEventListener('resize orientationchange', function() {
      size();
    }, false);
    size();
  }());
</script>

. Plus de barre de navigation de chrome ou quoi que ce soit qui perturbera votre sortie ou ce que vous voulez voir

J'espère vraiment que cela aidera quelqu'un!

Peut-être que ce n'est qu'un modèle pour le faire beaucoup plus.

3
Blueored