如何修复移动Safari中的vh（视口单位）CSS？

Question

我在我的一个项目中使用了 vh（视口单位）CSS，但在移动 Safari 中它不起作用。 Safari 似乎不知道如何处理 vh，但它在其他浏览器中工作正常。我想在有或没有 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;
}

Answer 1

CSS Tricks 对此有一个很好的答案 - https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

Answer 2

您可以使用 jQuery 来解决这个问题。

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

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

Answer 3

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

Answer 4

我今天使用了这个 CSS only hax，它起作用了。 iOS 8.2 iPhone Safari :

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

想法： 使用 calc 似乎可以让 Safari 将单位转换为 px 本身。现在我的页面在 Chrome 和 iOS 上的 Safari 上正确地全屏显示。

Answer 5

我也遇到了这个问题，这是我的解决方案。

这等于高度：100vh；

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

您还可以将以下代码与 jQuery,

一起使用

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

用 safari 检查过:)

Answer 6

如果您需要在移动浏览器上使用全屏 div，请尝试使用固定位置且高度设置为 100% 的包装器。然后将弹出窗口的高度设置为 100%。您可以通过顶部、左侧、右侧、底部属性以及高度和宽度以您喜欢的方式调整包装器和弹出窗口的位置。

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

Answer 7

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

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

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

Answer 8

我的版本是“querySelector”，因为：如果我使用元素“getelementbyid”的类不起作用。 而且这种方式如果不连接jQuery库的话js是最通用的。

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

Answer 9

与@user2394342的答案相关。

提供的文章提到了干净的CSS解决方案（不需要JS代码），如果您想填充完整的可用高度（即您使用

100vh

），它可以修复移动webkit浏览器的vh问题：

.my-element {
  height: 100vh; /* for non-webkit browsers */
  height: -webkit-fill-available;
}

Answer 10

自 Chrome 108、Safari 15.4 和 Firefox 101 起，提供了许多新的视口单位，即：

svh

、

svw

、

lvh

、

lvw

、

dvh

和

dvw

（等等） ...)

在我看来，最有趣的是动态视口单元

dvh

、

dvw

、

dvb

、

dvmax

等，它们会根据实际可见的屏幕尺寸动态调整内容大小，这就是我的目的个人大部分时间都想要。

如 MDN CSS

<length>

文档所述：

动态 当您希望视口自动调整大小以响应浏览器界面动态扩展或缩回时，可以使用动态视口大小。动态视口大小允许您设计的内容完全适合视口，无论是否存在动态浏览器界面。

动态视口单位由 dv 前缀表示，并产生 dv* 视口百分比单位。即使视口本身不变，动态视口百分比单位的大小也不稳定。

注意：虽然动态视口大小可以为您提供更多控制和灵活性，但使用基于动态视口大小的视口百分比单位可能会导致用户滚动页面时内容调整大小。这可能会导致用户界面降级并导致性能下降。

这是“小、大和动态视口单位”的 caniuse 页面