orientation：请求 PWA 的默认屏幕方向

发布于 2026-07-21更新于 2026-09-11作者 Carey Gill · 编辑流程

一句话： manifest 的 orientation 字段为已安装 Web 应用的顶层窗口请求一个默认屏幕方向——例如 portrait 或 landscape——具体是否生效取决于浏览器和设备是否真的遵循它。

支持情况

图例
支持
部分支持
需开启标志
不支持
未知

浏览器 / 平台	支持	版本	置信度	来源	备注
Chrome (Desktop)	支持	39	高	来源	—
Chrome (Android)	支持	39	高	来源	¹
Edge (Desktop)	支持	79	高	来源	²
Firefox (Desktop)	不支持	—	高	来源	³
Firefox (Android)	支持	79	高	来源	—
Safari (macOS)	不支持	—	高	来源	⁴
Safari (iOS)	不支持	—	高	来源	⁵⁶
Samsung Internet	支持	4.0	高	来源	⁷
WebView (Android)	支持	39	高	来源	⁸

由 browser-compat-data 镜像自 Chrome 的数据推导。
由 browser-compat-data 镜像自 Chrome 的数据推导。
browser-compat-data 未记录 Firefox 的支持。
browser-compat-data 未记录 Safari 的支持。
browser-compat-data 未记录 iOS 版 Safari 的支持。
由 browser-compat-data 镜像自 Safari 的数据推导。
由 browser-compat-data 镜像自 Chrome Android 的数据推导。
由 browser-compat-data 镜像自 Chrome Android 的数据推导。

源数据: /compatibility/manifest-orientation.json · 全球使用占比: 74 % (StatCounter 2026-05)

来源: 规范 · MDN · 最近核验 2026-10-03 · 置信度: 高 (由来源计算)

根据 MDN 与规范，orientation 的支持情况与实际表现取决于浏览器和设备是否遵循所请求的取值——请把它当作一种偏好，而非保证。

如何使用

在 Web 应用 manifest 中使用规范定义的关键字取值之一来声明该字段：

{
  "name": "Field Journal",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait"
}

规范定义的可接受取值包括 any、natural、landscape、landscape-primary、 landscape-secondary、portrait、portrait-primary 和 portrait-secondary。

如何在运行时检测

manifest 的 orientation 字段设置默认方向；该方向可以在运行时通过其他方式覆盖，包括 Screen Orientation API。这个独立 API 的 lock() 方法仅获得有限的浏览器支持，因此请在调用前对其做特性检测，并在该方法不存在或调用被拒绝时让布局仍能适应：

function supportsOrientationLock() {
  return 'orientation' in screen && typeof screen.orientation.lock === 'function';
}

async function lockPortrait() {
  if (!supportsOrientationLock()) {
    return; // 该浏览器没有 lock API：改用下方的响应式布局兜底
  }
  try {
    await screen.orientation.lock('portrait');
  } catch {
    // 处理拒绝的情况——lock() 的浏览器支持有限
  }
}

/* 兜底方案：用 CSS 适配布局，而不是假设某种方向机制一定生效。 */
@media (orientation: landscape) {
  .journal-entry {
    grid-template-columns: 1fr 1fr;
  }
}

常见问题

根据 MDN 与规范，各个 orientation 取值的支持情况可能因浏览器和设备而异；用户代理会尝试遵循所请求的取值，但对其接受的每个取值都不保证一定生效。
MDN 将 manifest 中的 orientation 描述为浏览器或操作系统尝试遵循的一种偏好，同时另外将 Screen Orientation API 记录为一种在运行时改变方向的方式——两者相关但属于不同的机制。
根据 MDN，省略 orientation 通常会回退到设备的自然方向，并结合用户或系统自身的方向设置，而不是单纯、保证生效的“自然方向”直通。
manifest 的 orientation 字段与独立的 Screen Orientation API（screen.orientation）是两种彼此独立的能力——用户代理可以只支持其中一个而不支持另一个。

下一步

Web App Manifest：orientation 支持情况 — 浏览器支持矩阵
Manifest display 模式：standalone 与 fullscreen — 该方向请求所处的显示模式