如何阻止Android端通过manifest.json安装的Web应用自动180°旋转屏幕

• 第一步：调整manifest.json的orientation配置
  manifest中默认的landscape/portrait取值会匹配正向+反向两个同类型方向，自然会出现180度倒置也旋转的问题，替换为更精确的固定方向取值即可：
  • 需固定正向横屏：改为"orientation": "landscape-primary"
  • 需固定正向竖屏：改为"orientation": "portrait-primary"
    修改后的manifest参考配置如下：

{
  "short_name": "Short",
  "name": "AppName",
  "icons": [
    {
      "src": "Images/icon192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "Images/icon512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "start_url": "./Login.aspx",
  "display": "standalone",
  "orientation": "landscape-primary", /* 按需替换为portrait-primary即可固定正向竖屏 */
  "background_color": "#DE007E",
  "theme_color": "#DE007E"
}

• 第二步：添加JS代码做双重方向锁定
  部分旧版浏览器、国产Android定制浏览器对manifest的orientation字段兼容性不足，可额外添加Screen Orientation API调用，页面加载时强制锁定方向：

window.addEventListener('load', async () => {
  try {
    // 固定正向横屏，需竖屏则替换为'portrait-primary'
    await screen.orientation.lock('landscape-primary');
  } catch (e) {
    // 兼容不支持该API的旧设备，可按需添加提示逻辑
    console.warn('屏幕方向锁定不支持', e);
  }
});

配置完成后重新安装PWA快捷方式即可生效，即便系统自动旋转关闭，也不会出现180度倒置旋转的问题。

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