如何修复vh（视口单位）css在手机Safari？ [英] How to fix vh(viewport unit) css in mobile Safari?

问题描述

我在我的一个项目中使用vh（视口单位）css，但在移动safari中它不工作。似乎Safari不知道该怎么做vh，但它在其他浏览器中工作正常。我想做出相同的效果，有或没有vh请帮助我。顺便说一下，我使用facebox。 （高度：50％无法正常工作）

I've used vh (viewport units) css in one of my projects but in mobile safari it doesn't work. It seems like Safari doesn't know what to do with vh, but it works fine in other browsers. I would like to make the same effect with or without vh please help me. By the way I'm using facebox. (height:50% doesnt work fine)

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>

这是我的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;
}

推荐答案

： https://github.com/rodneyrehm/viewport-units-buggyfill
它检查每个元素为vh / vw单位，并将其变成px。
我认为值得一试。

I came across this fix today: https://github.com/rodneyrehm/viewport-units-buggyfill It checks every element for a vh/vw unit and turns it into px. Well worth checking out I think.

这篇关于如何修复vh（视口单位）css在手机Safari？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！