Comment fixer le vh(fenêtre d'affichage de l'unité) css dans le navigateur Safari mobile?
J'ai utilisé vh (fenêtre d'affichage unités) css dans un de mes projets, mais dans le navigateur safari mobile ne fonctionne pas. Il semble que Safari ne sais pas quoi faire avec vh, mais il fonctionne très bien dans d'autres navigateurs. Je voudrais faire le même effet avec ou sans vh s'il vous plaît aider moi. Par la façon dont je suis l'aide de facebox. (hauteur:50% ne marche pas très 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;
}
OriginalL'auteur Alvaro | 2014-04-22
Vous devez vous connecter pour publier un commentaire.
Je suis tombé sur ce correctif aujourd'hui: https://github.com/rodneyrehm/viewport-units-buggyfill
Il vérifie chaque élément pour un vh/vw unité et la transforme en px.
Bien la peine de vérifier, je pense.
height: 100vh;
est encore 1/4 de l'écran. Il semble que cela fonctionne (ou ne rien faire) sur le bureau.OriginalL'auteur Rembrand
Vous pouvez utiliser jQuery afin de corriger cela.
Cela fonctionne sur tous les navigateurs. Espérons que cela aide.
OriginalL'auteur Koushik Das
J'ai aussi eu ce problème, voici ma solution.
C'est égal à hauteur:100vh;
Vous pouvez également utiliser le code ci-dessous avec jQuery,
Vérifié avec safari 🙂
$("your-element").css("height",window.innerHeight + "px");
OriginalL'auteur
J'ai utilisé ce CSS hax aujourd'hui et cela a fonctionné. iOS 8.2 iPhone Safari :
Pensée: à l'Aide de calc semble pour obtenir Safari pour convertir les unités px à lui-même. Maintenant, ma page est correctement plein de purge sur Chrome et Safari sur iOS.
C'est probablement ce qui ne fonctionne pas sur Firefox, Opera, IE, ou d'autres non-navigateurs webkit.
calc est maintenant bien pris en charge caniuse.com/#feat=calc
OriginalL'auteur Cris
Si vous avez besoin d'un plein écran div sur les navigateurs mobiles, essayez d'utiliser un wrapper avec position fixe et à hauteur de 100%. Ensuite, situé à 100% de la hauteur de votre popup. Vous pouvez ajuster la position de l'emballage et de la fenêtre, dans une manière que vous le souhaitez avec en haut, à gauche, à droite, en bas des propriétés, ainsi que la hauteur et la largeur.
Ces élimine le problème avec les navigateurs mobiles barre d'adresse autohiding dans mon cas où j'ai dû créer un plein écran popup sur mobile chrome.
OriginalL'auteur 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 la bonne vh, et le mettre dans un css variable de sorte que vous pouvez l'utiliser dans le fichier css:
OriginalL'auteur apptaro
Ma version est "querySelector" car: si j'utilise la classe de l'élément "getelementbyid" n'est pas travaillé.
Et de cette façon, le js est plus universel que s'bibliothèques jQuery ne sont pas connectés.
document.querySelector("your-element").style.height = window.innerHeight + 'px';
OriginalL'auteur Володимир Хоменко