CSS3 100vh non constant dans le navigateur mobile

Question

CSS3 100vh non constant dans le navigateur mobile

Demandé el 9 de Mai, 2016: Quand la question a-t-elle été
64204 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai un problème très étrange... dans chaque navigateur et version mobile, j'ai rencontré ce comportement :

tous les navigateurs ont un menu supérieur lorsque vous chargez la page (montrant la barre d'adresse par exemple) qui glisse vers le haut lorsque vous commencez à faire défiler la page.
100vh parfois n'est calculée que sur la partie visible d'un viewport, donc lorsque la barre du navigateur glisse vers le haut, 100vh augmente (en termes de pixels)
toute la mise en page doit être repeinte et réajustée car les dimensions ont changé
un mauvais effet de saut pour l'expérience utilisateur

Comment éviter ce problème ? Quand j'ai entendu parler de viewport-height pour la première fois, j'étais enthousiaste et je pensais pouvoir l'utiliser pour des blocs de hauteur fixe au lieu d'utiliser javascript, mais maintenant je pense que le seul moyen de le faire est en fait javascript avec un événement de redimensionnement...

vous pouvez voir le problème à : site de prélèvement

Quelqu'un peut-il m'aider ou me suggérer une solution CSS ?

code de test simple :

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Demandé el 9 de Mai, 2016 par Nereo Costacurta

2 votes

Si j'ai bien compris la question, le problème auquel vous êtes confronté est que dans le navigateur mobile, la hauteur est supérieure à la hauteur du viewport visible n'est-ce pas ?

Commenté el 9 de Mai, 2016 par Gaurav Aggarwal

0 votes

Intéressant, je n'avais jamais remarqué ça avant. C'est principalement l'image d'arrière-plan qui est sensiblement instable. Et si vous ajoutiez un transition: 0.5s ou plus, pour que le changement soit moins brutal ?

Commenté el 9 de Mai, 2016 par C14L

1 votes

@GauravAggarwal non, c'est exactement le contraire : la hauteur réelle du viewport est supérieure à celle fournie par le navigateur lorsque sa barre d'adresse est visible...

Commenté el 9 de Mai, 2016 par Nereo Costacurta

Afficher 5 autres commentaires

Answer 1

5 Réponses

Answer 2

1voto

Declan Kay Points 76

Le VH 100 ne fonctionne pas bien sur mobile car il ne tient pas compte de la barre iOS (ou d'une fonctionnalité similaire sur d'autres plateformes).

Une solution qui fonctionne bien est d'utiliser le JavaScript "window.innerHeight".

Il suffit d'affecter la hauteur de l'élément à cette valeur, par exemple $('.element-name').height(window.innerHeight) ;

Remarque : il peut être utile de créer une fonction en JS, afin que la hauteur puisse changer lorsque l'écran est redimensionné. Cependant, je suggère de n'appeler la fonction que lorsque la largeur de l'écran est modifiée. De cette façon, l'élément ne sautera pas en hauteur lorsque la barre iOS disparaît lorsque l'utilisateur fait défiler la page vers le bas.

Répondu el 26 de Novembre, 2020 par Declan Kay (76 Points )

Answer 3

0voto

Malvoz Points 101

Avec un peu de chance, il s'agira d'une variable d'environnement CSS définie par l'UA, comme suggéré ici : https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046

Répondu el 3 de Août, 2018 par Malvoz (101 Points )

Answer 4

0voto

turkus Points 1949

Parce que il ne sera pas réparé, vous pouvez faire quelque chose comme :

# html
<body>
  <div class="content">
    <!-- Your stuff here -->
  </div>
</body>

# css
.content {
  height: 80vh;
}

Pour moi, c'était la solution la plus rapide et la plus pure que de jouer avec le JavaScript qui ne pouvait pas fonctionner sur de nombreux appareils et navigateurs.

Il suffit d'utiliser la valeur appropriée de vh qui correspond à vos besoins.

Répondu el 9 de Novembre, 2018 par turkus (1949 Points )

Answer 5

0voto

Rico Kahler Points 4261

Ce qui suit a fonctionné pour moi :

html { height: 100vh; }

body {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}

/* this is the container you want to take the visible viewport  */
/* make sure this is top-level in body */
#your-app-container {
  height: 100%;
}

Le site body prendra la hauteur de la fenêtre visible et #your-app-container avec height: 100% fera en sorte que ce conteneur prenne la hauteur de la fenêtre visible.

Répondu el 28 de Novembre, 2018 par Rico Kahler (4261 Points )

Answer 6

0voto

Ray Andison Points 196

L'utilisation de vh sur les appareils mobiles ne va pas fonctionner avec 100vh, en raison de leurs choix de conception utilisant toute la hauteur de l'appareil sans inclure les barres d'adresse, etc.

Si vous recherchez une mise en page comprenant des hauteurs de div proportionnelles à la hauteur réelle de la vue, j'utilise la solution suivante en css pur :

:root {
  --devHeight: 86vh; //*This value changes
}

.div{
    height: calc(var(--devHeight)*0.10); //change multiplier to suit required height
}

Vous avez deux options pour définir la hauteur de la fenêtre d'affichage. Définissez manuellement la valeur --devHeight à une hauteur qui convient (mais vous devrez entrer cette valeur pour chaque type de périphérique pour lequel vous codez).

ou

Utiliser javascript pour obtenir la hauteur de la fenêtre et ensuite mettre à jour --devheight lors du chargement et du rafraîchissement de la fenêtre (cependant, cela nécessite l'utilisation de javascript et n'est pas une solution purement css).

Une fois que vous avez obtenu la hauteur d'affichage correcte, vous pouvez créer plusieurs divisions à un pourcentage exact de la hauteur totale de la fenêtre d'affichage en modifiant simplement le multiplicateur dans chaque division à laquelle vous attribuez la hauteur.

0.10 = 10% de la hauteur de vue 0.57 = 57% de la hauteur de vue

J'espère que cela pourra aider quelqu'un ;)

Répondu el 3 de Avril, 2019 par Ray Andison (196 Points )

1 votes

C'est une bonne solution. Vous pouvez en savoir plus à ce sujet sur cet article sur Css-tricks .

Commenté el 3 de Avril, 2019 par Amaury Hanser

CSS3 100vh non constant dans le navigateur mobile

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

CSS3 100vh non constant dans le navigateur mobile

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: