求助：Angular/TypeScript实现移动端仅横屏时自动开启全屏

核心修改步骤 #

• 筛选移动设备：先过滤桌面设备，仅在移动设备上执行逻辑
• 精确识别横屏状态：仅当screen.orientation.type包含landscape时触发全屏
• 优化全屏调用逻辑：避免重复调用API，同时处理多浏览器兼容
• 清理事件监听：组件销毁时移除监听，防止内存泄漏

修改后的完整代码 #

import { Component, 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 {
  private orientationChangeHandler: EventListener;

  ngOnInit(): void {
    this.orientationChangeHandler = (event) => {
      // 1. 判断是否为移动设备
      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      if (!isMobile) return;

      // 2. 判断是否处于横屏状态
      const orientation = screen.orientation.type;
      if (!orientation.includes('landscape')) return;

      // 3. 检查是否已处于全屏，避免重复调用
      const isFullscreen = document.fullscreenElement || 
                          document.webkitFullscreenElement || 
                          document.mozFullScreenElement || 
                          document.msFullscreenElement;
      if (isFullscreen) return;

      // 4. 调用全屏API（兼容各浏览器）
      const elem = document.documentElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if ((elem as any).mozRequestFullScreen) {
        (elem as any).mozRequestFullScreen();
      } else if ((elem as any).msRequestFullscreen) {
        (elem as any).msRequestFullscreen();
      } else if ((elem as any).webkitRequestFullscreen) {
        (elem as any).webkitRequestFullscreen();
      }
    };

    window.addEventListener('orientationchange', this.orientationChangeHandler);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听，防止内存泄漏
    window.removeEventListener('orientationchange', this.orientationChangeHandler);
  }
}

关键注意事项 #

• 浏览器权限限制：多数现代浏览器要求全屏操作需由用户触发的事件触发，orientationchange属于用户主动旋转设备的事件，但部分浏览器（如iOS Safari）仍有严格限制，可能需要用户先完成一次交互（如点击）后，后续的横屏操作才能触发全屏。
• 移动设备检测局限性：基于userAgent的检测并非100%准确，若需更精准判断，可结合window.matchMedia('(pointer: coarse)').matches检测触摸设备特性。
• 全屏API兼容：代码已覆盖主流浏览器的前缀差异，但老旧浏览器可能仍不支持该特性。

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