如何使用Angular实现移动端网站自动以横屏模式打开？

首先说明前提：移动端网页本身没有系统级权限直接强制设备切换横屏，目前可落地的方案分为两种：页面模拟横屏、引导用户手动开启横屏，如果是打包为原生APP的场景可以直接配置全局方向。

方案1：CSS模拟强制横屏（无感知适配，无需用户操作） #

这个方案通过旋转页面根容器模拟横屏效果，适合不想让用户手动操作的场景：

• 第一步：在全局样式文件styles.css中添加强制横屏样式

/* styles.css */
.force-landscape {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vh;
  height: 100vw;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
  overflow-x: hidden;
  overflow-y: auto;
}

• 第二步：在app.component.ts中添加设备和方向检测逻辑

// app.component.ts
import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 是否为移动设备
  isMobile = false;
  // 当前是否为横屏状态
  isLandscape = false;

  ngOnInit(): void {
    // 通过userAgent检测移动设备
    this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    this.checkOrientation();
  }

  // 监听窗口尺寸变化，实时检测屏幕方向
  @HostListener('window:resize')
  checkOrientation(): void {
    if (!this.isMobile) return;
    this.isLandscape = window.innerWidth > window.innerHeight;
  }
}

• 第三步：在app.component.html中绑定样式类

<!-- app.component.html -->
<div [ngClass]="{'force-landscape': isMobile && !isLandscape}">
  <router-outlet></router-outlet>
</div>

注意：该方案存在极小概率的机型适配问题，部分设备上软键盘弹出时可能出现布局偏移，适合交互复杂度低的站点使用。

方案2：竖屏遮罩引导用户手动切换横屏（兼容性最高） #

这个方案兼容性100%，不会出现布局异常问题：

• 第一步：在styles.css中添加引导遮罩样式

/* styles.css */
.orientation-tip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 99999;
}

• 第二步：修改app.component.html添加引导层

<!-- app.component.html -->
<!-- 竖屏时显示引导提示 -->
<div *ngIf="isMobile && !isLandscape" class="orientation-tip">
  请开启设备自动旋转并切换为横屏模式访问
</div>
<!-- 横屏时显示站点内容 -->
<div [hidden]="isMobile && !isLandscape">
  <router-outlet></router-outlet>
</div>

补充：打包为原生APP的场景 #

如果你的Angular项目是用Cordova、Capacitor等工具打包为移动端APP，可以直接配置全局方向强制横屏，无需做页面层面的适配：

• Cordova：在config.xml中添加配置项 <preference name="Orientation" value="landscape" />
• Capacitor：在capacitor.config.ts中添加配置项 orientation: 'landscape'

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