iOS Safari单标签模式下Angular iframe的100vh适配问题

核心问题分析 #

移动端Safari切换到单标签模式时会隐藏底部工具栏，导致可视区域高度动态变化。传统的100vh在Safari中会包含工具栏高度，切换模式后容器高度未自动适配，进而出现内容被推挤、按钮截断的情况。

解决方案 #

1. 修正HTML结构

确保iframe标签存在于容器内，使用Angular视图引用简化DOM操作：

<div [hidden]="!show" class="conteiner-iFrame">
  <iframe #iframe id="idIframe" [src]="iframeUrl" frameborder="0"></iframe>
</div>

2. 优化CSS适配逻辑

针对Safari特性调整容器和iframe的高度设置，规避100vh的局限性：

/* 重置全局基础样式，确保根元素高度基准正确 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.conteiner-iFrame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 优先使用Safari专属属性适配动态工具栏 */
  height: -webkit-fill-available;
  height: 100vh;
  overflow: hidden;
  background-color: #FFFFFF;
}

#idIframe {
  width: 100%;
  height: 100%;
  border: none;
}

3. 调整TS监听逻辑

使用ResizeObserver替代传统resize事件，精准响应视图尺寸变化：

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit, OnDestroy {
  @ViewChild('iframe') iframe!: ElementRef<HTMLIFrameElement>;
  show = true;
  iframeUrl = '替换为你的iframe链接';
  private resizeObserver?: ResizeObserver;

  ngOnInit(): void {
    this.adjustIframeDimensions();
    // 监听容器尺寸变化，适配Safari工具栏切换场景
    const container = document.querySelector('.conteiner-iFrame');
    if (container) {
      this.resizeObserver = new ResizeObserver(() => this.adjustIframeDimensions());
      this.resizeObserver.observe(container);
    }
  }

  ngOnDestroy(): void {
    // 清理观察者，避免内存泄漏
    if (this.resizeObserver) {
      const container = document.querySelector('.conteiner-iFrame');
      container && this.resizeObserver.unobserve(container);
      this.resizeObserver.disconnect();
    }
  }

  adjustIframeDimensions(): void {
    // 精准检测移动端Safari
    const isSafariMobile = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && 
                          /iphone|ipad|ipod/i.test(navigator.userAgent);
    if (isSafariMobile && this.iframe) {
      const container = document.querySelector('.conteiner-iFrame');
      if (container) {
        const containerHeight = container.getBoundingClientRect().height;
        this.iframe.nativeElement.style.height = `${containerHeight}px`;
      }
    }
  }
}

关键优化点 #

• position: fixed确保容器始终贴合可视区域，不受页面滚动或工具栏变化影响。
• -webkit-fill-available自动排除Safari工具栏占用空间，比100vh更适配动态视图场景。
• ResizeObserver比传统resize事件更精准，能捕捉到工具栏切换这类局部尺寸变化。
• 优化浏览器检测逻辑，避免误判Chrome等伪装成Safari的浏览器。

内容的提问来源于stack exchange，提问作者erriza