如何在系统锁定屏幕旋转时阻止PWA自动旋转？

1. 修正Web App Manifest配置 #

确保manifest.json中明确设置屏幕方向锁定参数，部分厂商定制系统对该配置的解析优先级较高：

{
  "orientation": "portrait-primary" // 固定默认竖屏，可选值包括portrait-secondary、landscape-primary、landscape-secondary
}

避免使用any值，尽量指定单一固定方向，减少系统解析歧义。

2. 用CSS强制锁定视觉方向 #

针对部分不严格遵循manifest的系统，通过CSS转换模拟锁定效果：

@media screen and (orientation: landscape) {
  body {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

该方式通过视觉转换固定页面显示方向，不受系统旋转信号干扰。

3. 利用Web API主动控制方向 #

在HTTPS环境下（独立安装的PWA默认满足），使用screen.orientationAPI强制锁定：

// 页面加载时锁定目标方向
window.addEventListener('load', () => {
  if (screen.orientation?.lock) {
    screen.orientation.lock('portrait-primary')
      .catch(err => console.error('方向锁定失败:', err));
  }
});

// 监听方向变化，及时修正
screen.orientation.addEventListener('change', () => {
  if (screen.orientation.type !== 'portrait-primary') {
    screen.orientation.lock('portrait-primary');
  }
});

注意：部分设备系统权限可能限制该API，需确保PWA已获得显示类权限。

4. 适配厂商定制系统权限 #

• Realme/OPPO设备：进入「设置 > 应用管理 > 你的PWA应用 > 权限管理」，关闭单独的「自动旋转屏幕」权限——部分定制系统会给PWA分配独立于全局设置的旋转权限。
• 华为设备：关闭「设置 > 显示和亮度 > 自动旋转」中的「智能旋转」功能；同时进入PWA应用信息页，检查「显示设置」是否单独开启了旋转权限，如有则关闭。

5. 确认PWA安装状态 #

确保测试的是已添加到主屏幕的独立PWA，而非浏览器内打开的网页——浏览器环境下的网页可能不受系统旋转锁定的严格约束，只有独立安装的PWA才会完全遵循配置和系统权限规则。

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