能否通过PWA机制将应用锁定为始终竖屏模式？

你提到的manifest.json里的orientation属性确实仅能设置启动默认方向，无法阻止后续屏幕旋转。不过可以通过Screen Orientation API实现强制竖屏锁定，这是符合PWA规范的原生解决方案。

具体实现 #

这个API允许你主动锁定屏幕方向，步骤如下：

1. 确保PWA处于独立运行模式（已安装到设备或开启全屏），多数浏览器要求该API在安全上下文或用户交互触发的环境中调用。
2. 在应用初始化或用户首次交互时调用锁定方法：

// 锁定为竖屏（支持正竖和倒竖，仅需正竖可改用'portrait-primary'）
async function lockPortraitOrientation() {
  try {
    await screen.orientation.lock('portrait');
  } catch (err) {
    console.error('屏幕方向锁定失败:', err);
  }
}

// 绑定到用户首次点击（规避部分浏览器的交互限制）
document.addEventListener('DOMContentLoaded', () => {
  const initLock = () => {
    lockPortraitOrientation();
    document.body.removeEventListener('click', initLock);
  };
  document.body.addEventListener('click', initLock);
});

3. 可选：监听方向变化事件，若锁定失效自动重试：

screen.orientation.addEventListener('change', lockPortraitOrientation);

注意事项 #

• 部分移动设备的系统级强制旋转设置可能会覆盖API的锁定效果，这种场景无法通过前端代码解决
• 桌面端PWA无需处理该逻辑，因为桌面屏幕方向通常不会变动

备选视觉方案 #

如果API在某些设备上无法生效，可通过CSS模拟竖屏体验，让用户始终看到竖屏界面：

body {
  width: 100vh;
  height: 100vw;
  transform: rotate(90deg) translateX(-100%);
  transform-origin: top left;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

这种方式只是视觉层面的适配，实际DOM布局仍跟随屏幕方向，但能满足让家人仅看到竖屏的需求。

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