web-dev-qa-db-fra.com

Comment réparer vh (viewport unit) css dans Safari mobile?

J'ai utilisé vh (viewport units) css dans l'un de mes projets, mais dans un safari mobile, cela ne fonctionne pas. Il semble que Safari ne sache pas quoi faire avec vh, mais cela fonctionne très bien dans les autres navigateurs. Je voudrais faire le même effet avec ou sans vh aidez-moi s'il vous plaît. En passant, j'utilise Facebox. (hauteur: 50% ne fonctionne pas bien)

html:

 <div id="facebox" style="top: 0px; left: 0px; display: block;"> 
       <div class="popup">    
             <div class="body"> 
                  <div class="content_light">
            <div class="Lcontent_left"></div>
                    <div class="Lcontent_right">
                    <div class="Lright_content"></div>
                    </div>
                  </div>
              </div>
       </div>
    </div>

C'est mon css:

#facebox .popup {
    display:block;
    position:relative;
margin:auto;
margin-top:0%;
  min-height:100vh;
  height:1px;
  border-radius:5px;
}

    #facebox .body {
  padding:0px;
  display:block;
  position:relative;
  background: #fff;
  width:100%;
  min-height:100vh;
  height:1px;
  margin:auto;
   border-radius:5px;
}
.Lcontent_left{
    position:relative;
    float:left;
    width:100%;
    height:50vh;
    /*min-height:250px;*/
    text-align:center;
    overflow:hidden;
    }
.Lcontent_left_fullscreen{
    display:none;
    }
.Lcontent_right{
    float:left;
    text-justify:inter-Word;
    position:relative;
    width:100%;
    height:50vh;
    background-color:white;
    overflow:auto;
    font-family:"Open Sans",Helvetica,sans-serif;
    }
.Lright_content{
    position:relative;
    width:95%;
    margin:auto;
    margin-left:5px;
    overflow:auto;
    height:50vh;
    Word-wrap:break-Word;
    line-height: 1.5;
    font-size:16px;
    overflow:auto;
}
cssheightmobile-safarilightboxviewport-units
14
Alvaro

Je suis tombé sur ce correctif aujourd'hui: https://github.com/rodneyrehm/viewport-units-buggyfill Il vérifie chaque élément pour une unité vh/vw et le transforme en px . check out je pense.

8
Rembrand

Vous pouvez utiliser jQuery afin de résoudre ce problème.

$('container').height($(window).height()/2);

Cela fonctionne sur tous les navigateurs. J'espère que ça aide.

6
Koushik Das

J'ai aussi eu ce problème, voici ma solution.

Ceci est égal àhauteur: 100vh;

document.getElementById("your-element").style.height = window.innerHeight + 'px';

Vous pouvez également utiliser le code ci-dessous avec jQuery ,

$('your-element').height(window.innerHeight + 'px');

Vérifié avec safari :)

6
Praneeth Nidarshan

J'ai utilisé ce CSS seulement hax aujourd'hui et cela a fonctionné. iOS 8.2 iPhone Safari:

html, body {
    ...
    width: -webkit-calc(100% - 0px);
    ...
}

Pensée: L'utilisation de calc semble amener Safari à convertir des unités en px. Maintenant, ma page est correctement mise à fond sur Chrome et Safari sur iOS.

4
Cris

Si vous avez besoin d'une division plein écran sur les navigateurs mobiles, essayez d'utiliser un wrapper dont la position et la hauteur sont définies à 100%. Ensuite, réglez 100% height sur votre popup. Vous pouvez ajuster la position du wrapper et du popup comme vous le souhaitez avec les propriétés haut, gauche, droite, bas, ainsi que la hauteur et la largeur.

Ceci élimine le problème de masquage automatique de la barre d'adresse des navigateurs mobiles dans lequel je devais créer une fenêtre contextuelle plein écran sur le chrome mobile. 

1
vulp

J'ai trouvé cette bibliothèque très utile: https://github.com/Hiswe/vh-check

Il va calculer la valeur de décalage pour le bon vh, et le mettre dans une variable css afin que vous puissiez l'utiliser dans le css:

.main {
  height: calc(100vh - var(--vh-offset, 0px));
}
0
apptaro