Ionic3 iOS端HTML5视频横竖屏切换无法自适应容器问题

我之前在做Ionic3的WebRTC项目时，也踩过一模一样的iOS坑——直接横竖屏打开应用时视频适配好好的，但切换方向就卡死不变，Android却完全正常。这其实是iOS WebKit的特性导致的：横竖屏切换时，WebRTC的video元素不会自动重新计算尺寸，加上浏览器对视频轨道的尺寸缓存，就出现了适配失效的情况。下面给你几个亲测有效的解决办法：

方案一：监听屏幕方向变化，强制触发视频重绘/尺寸重置 #

在你的页面TS文件里添加屏幕resize事件监听，每次横竖屏切换时手动重置视频元素的尺寸，或者触发浏览器重绘：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'page-video-call',
  templateUrl: 'video-call.html'
})
export class VideoCallPage implements OnInit {
  // 获取视频元素的引用
  @ViewChild('remoteVideo') remoteVideo: ElementRef;

  constructor(private platform: Platform) {}

  ngOnInit() {
    // 监听屏幕尺寸变化（对应横竖屏切换）
    this.platform.on('resize').subscribe(() => {
      this.fixVideoSizeForIOS();
    });
  }

  private fixVideoSizeForIOS() {
    const videoEl = this.remoteVideo.nativeElement;
    if (!videoEl) return;

    // 先强制设置视频尺寸为容器100%
    videoEl.style.width = '100%';
    videoEl.style.height = '100%';
    // 通过修改transform触发浏览器重绘（iOS专属小技巧）
    videoEl.style.transform = 'translateZ(0)';

    // 如果上面的方法无效，尝试重新绑定媒体流（兜底方案）
    if (this.platform.is('ios')) {
      const stream = videoEl.srcObject;
      if (stream) {
        videoEl.srcObject = null;
        setTimeout(() => {
          videoEl.srcObject = stream;
        }, 50);
      }
    }
  }
}

对应的HTML要给video元素加上模板引用：

<ion-content class="video-wrapper">
  <!-- 务必加上playsinline系列属性，避免iOS自动全屏播放 -->
  <video #remoteVideo autoplay playsinline webkit-playsinline></video>
</ion-content>

方案二：优化CSS样式，确保容器与视频的弹性适配 #

给视频容器和video元素设置更健壮的样式，重点利用object-fit属性保证视频比例适配：

.video-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  /* 根据需求选contain（保持比例，留黑边）或cover（填充容器，裁剪边缘） */
  object-fit: contain;
  /* 强制iOS内联播放，禁止自动全屏 */
  -webkit-playsinline: true;
  playsinline: true;
}

object-fit是解决视频比例适配的核心，它能让视频在保持原有宽高比的同时，完美适配容器尺寸，不会出现拉伸变形的问题。

方案三：固定viewport设置，避免iOS自动缩放 #

在项目根目录的index.html中，调整viewport的meta标签，禁止页面自动缩放，确保横竖屏切换时页面尺寸计算准确：

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

这个设置能防止iOS在横竖屏切换时自动调整页面缩放比例，从根源上避免视频元素的尺寸计算出现偏差。

总结 #

建议先尝试方案二+方案三，大部分场景下就能解决问题；如果还是不行，再加上方案一的事件监听兜底。我用这套组合拳解决了好几个Ionic3项目中的iOS视频自适应问题，亲测有效。

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