100vh 在 Safari iOS“单选项卡”配置上无法正常工作

Question

我使用 Angular 将 iframe 加载到 html 中。

<div [hidden]="!show" id="idIframe" class="conteiner-iFrame">
    
</div>

在我的ts上我有

ngOnInit(): void {
    this.adjustIframeDimensions();
    addEventListener('resize',this.adjustIframeDimensions);
}

我的 adjustmentIframeDimensions() 如下：

  adjustIframeDimensions() {
    var browser = navigator.userAgent.toLowerCase();

    if (browser.indexOf('safari')>-1 && browser.indexOf('mobile')>-1){ document.getElementsByTagName('html')[0].style.height = '100vh'; setTimeout(() => {
        document.getElementsByTagName('html')[0].style.height = '100%'; }, 500);
      }
}

使用 Safari 浏览器时，使用默认设置（Safari 选项卡栏），内容看起来是正确的，但是，当更改为“Safari 单栏”时，内容似乎被下推，并且按钮似乎从视图中被切掉。

{图像到[按钮中出现错误的图像，左侧选项卡栏 - 工作正常 |右侧-单个选项卡-推送内容，按钮剪切。 ] ()}

已经在我的 CSS 上尝试了很多配置

div.conteiner-iFrame {
    width: 100%;
    height: 100%;
    height: 100vh;
    height: -moz-available;
    height: -webkit-fill-available;
    height: stretch;
    max-height: 100vh;
    position: absolute;
    overflow-y: auto;
    background-color: #FFFFFF;
}

#idIframe {
    height: 100%;
    height: 100vh;
    height: -moz-available;
    height: -webkit-fill-available;
    height: stretch;
}

也尝试过使用一些js，但没有成功

    //fixing error in Safari
    if (browser.indexOf('safari')>-1 && browser.indexOf('mobile')>-1) { 
      var iframe = document.getElementById('idIframe');
        setTimeout(() => {
          //var viewportHeight = window.innerHeight;
          iframe!.style.height = `${iframe!.clientHeight}px`;
        }, 500)
      }

      const isSafariMobile = /safari/i.test(navigator.userAgent) && /iphone/i.test(navigator.userAgent);
      if(isSafariMobile) {
        setTimeout(() => {
          this.iframe.nativeElement.style.height = '100%';
        }, 500);
      }

有什么想法吗？欣赏

Answer 1

您需要新的小视口单位，特别是

100svh

（小视口高度的100%）。这应该就是您所需要的：

html, body {
  margin: 0;
}

.fill {
  width: 100%;
  height: 100svh;
}

由于移动浏览器根据用户交互扩展和收缩选项卡栏，因此创建了小型和大型视口单元。常规视口单位（例如，

vh

）不适用于这些动态视口尺寸。

大视口单元（例如

100lvh

）对于显示背景图像或其他可以暂时被浏览器UI元素覆盖但不应该在用户与网站交互时不断改变大小的东西很有用。当选项卡栏收缩时，它们对应于视口大小。

小视口单元（例如

100svh

）对于放置必须始终可见的内容非常有用。当选项卡栏展开时，它们对应于视口大小。通常，内容需要适应动态视口大小，但在您的情况下

100svh

将具有所需的效果。

新的大视口和小视口单位是静态的，不会根据滚动交互而改变。不过，当手动调整浏览器窗口大小时，它们确实会发生变化。还有一个 dynamic 对应项（例如

100dvh

），它等于小或大视口尺寸，具体取决于 UI 是否展开。

请注意，您永远不需要使用 JavaScript 来更新像

100%

或

100vh

这样的相对值，因为它们的“绝对”值在您设置它们时不会被评估，而是在它们的引用发生变化时由浏览器不断地评估。因为 JavaScript 调整大小事件使用它们异步触发，看起来并不像使用 CSS 视口单元那么好。现在

vh

、

lvh

和

svh

已广泛使用，除了 WebGL/Canvas 之外，根本没有必要使用 JavaScript 调整大小处理程序。