如何在移动Safari中修复vh(视口单元)css?

时间:2014-04-22 14:58:48

标签: css height mobile-safari lightbox viewport-units

我在我的一个项目中使用了vh(视口单元)css,但在移动safari中它不起作用。似乎Safari不知道如何处理vh,但它在其他浏览器中工作正常。无论有没有,我想做同样的效果,请帮助我。顺便说一句,我正在使用facebox。 (身高:50%不能正常工作)

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;
}

8 个答案:

答案 0 :(得分:8)

我今天遇到了这个问题:https://github.com/rodneyrehm/viewport-units-buggyfill 它检查vh / vw单元的每个元素并将其转换为px。 非常值得一试。我想。

答案 1 :(得分:7)

你可以使用jQuery来修复它。

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

这适用于每个浏览器。希望它有所帮助。

答案 2 :(得分:6)

我也有这个问题,这是我的解决方案。

这等于 身高:100vh ;

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

您还可以使用以下代码与 jQuery

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

使用safari检查:)

答案 3 :(得分:5)

我今天只使用这个CSS hax并且它有效。 iOS 8.2 iPhone Safari:

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

思考:使用calc似乎让Safari将单位转换为px本身。现在,我的页面在iOS上的Chrome和Safari上正确显示。

答案 4 :(得分:2)

如果您需要在移动浏览器上使用全屏div,请尝试使用固定位置和高度设置为100%的包装。然后将100%高度设置为弹出窗口。您可以使用top,left,right,bottom属性以及高度和宽度以您喜欢的方式调整包装器和弹出窗口的位置。

在我的情况下,我必须在移动设备上创建全屏弹出窗口,这消除了移动浏览器地址栏自动隐藏的问题。

答案 5 :(得分:1)

CSS技巧-https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

对此有一个很好的答案
this.env.getProperty()
.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

答案 6 :(得分:0)

我发现此库非常有用:https://github.com/Hiswe/vh-check

它将为正确的vh计算偏移值,并将其放入css变量中,以便您可以在css中使用它:

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

答案 7 :(得分:0)

我的版本是“ querySelector”,因为:如果我使用元素类“ getelementbyid”,则不起作用。 如果未连接jQuery库,则js最通用。  document.querySelector("your-element").style.height = window.innerHeight + 'px';