manifest.json 不支持 orientation 字段，该字段非 web 标准且被浏览器忽略；方向锁定须通过 javascript 调用 screen.orientation.lock() 实现，并需用户交互触发，配合 viewport 控制和 css 兜底。
HTML 的 manifest.json 不支持通过 orientation 锁定 PWA 显示方向 —— 这个字段在 Web App Manifest 规范中根本不存在，浏览器会直接忽略它。
manifest.json 里根本没有 orientation 字段
Manifest 规范（W3C 和 Chrome 实现）明确列出的显示相关字段只有 display、display_override、orientation 不是合法字段。你如果在 manifest.json 里写上 "orientation": "portrait"，Lighthouse 不报错，但 Chrome DevTools 的 Application → Manifest 面板里根本不会显示该值，且对页面方向零影响。
- 合法的方向控制字段目前只有
display_override（用于指定多 display 模式优先级，如["window-controls-overlay", "minimal-ui"]），但它不涉及旋转 -
orientation是旧版 Android WebView 或 Cordova 插件用的配置项，不是 Web 标准 - Manifest 中真正和“方向”沾边的，只有
display值为standalone或fullscreen时，系统可能沿用设备当前方向 —— 但这不是锁定，只是不强制横屏
真正能锁定方向的是 screen.orientation API
要在 PWA 启动后强制保持竖屏（或横屏），必须用 JavaScript 主动调用 screen.orientation.lock()，且需用户手势触发（如点击按钮）或在页面加载完成后的合理时机（如 DOMContentLoaded 后一小段延迟）。
- 直接在
script里写screen.orientation.lock("portrait")会失败：Chrome 要求该操作必须由用户交互（如click、touchstart）触发，否则抛出DOMException: Permission denied - 部分安卓机型（尤其旧版 Samsung）对
lock()支持不稳定，建议加try/catch并 fallback 到提示用户手动旋转 - 解锁要用
screen.orientation.unlock()，比如在离开关键流程时调用
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
if (screen.orientation && screen.orientation.lock) {
screen.orientation.lock('portrait').catch(e => {
console.warn('Orientation lock failed:', e.message);
});
}
}, 300);
});
配合 meta viewport 和 CSS 防止意外横屏渲染
即使锁定了 orientation，某些安卓浏览器仍可能在旋转时重绘布局，导致内容被裁剪或缩放异常。这时需要补充两层防护：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">—— 禁止双指缩放，减少旋转后视口重计算 - CSS 强制竖屏样式（仅视觉兜底）：
@media (orientation: landscape) { body { transform: rotate(-90deg); transform-origin: left top; width: 100vh; height: 100vw; } }，但注意这仅是视觉欺骗，不阻止 JS 获取到横屏事件 - 监听
window.orientation或resize事件做响应式降级，例如旋转时显示提示：“请将手机转为竖屏使用”
真正起效的方向锁定只发生在运行时，靠 screen.orientation.lock() 驱动；manifest 文件只管图标、名称、启动画面这些静态元信息。别在 manifest.json 里写 orientation —— 它不会生效，还会让你误以为配置已完成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
