竖屏方向：定义、示例与 CSS

竖屏方向 表示屏幕 高度大于宽度 （即高度大于宽度）。 横屏方向 则相反： 宽度大于高度。竖屏常见于手机信息流、文章、表单和聊天。横屏适合视频、地图以及需要横向空间的 dashboard。宽高比（如 9:16 竖屏或 16:9 横屏）描述的是宽度与高度的关系；方向只告诉你哪一边更长。

竖屏与横屏示例

如果你搜过竖屏方向的图片，这种并排图就是直观示意：同一类设备上，一个竖长框和一个宽框。

竖屏把注意力收拢到垂直滚动。横屏则展示更多列和并排 UI。它们是布局场景，而不只是旋转标签。

方向（Orientation）与分辨率或宽高比不同。两台设备可能都是竖屏，但像素尺寸和比例不同。响应式布局应基于视口形状，而非特定手机型号。

CSS 中的竖屏方向

当旋转需要改变间距或结构时，请使用 CSS。 @media (orientation: portrait) 查询匹配高度大于宽度的视口。MDN 在以下位置对此进行了说明： orientation 媒体特性.

/* Default: portrait-first single column */
.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.sidebar {
  display: none;
}

@media (orientation: landscape) {
  .page {
    grid-template-columns: 280px 1fr;
  }

  .sidebar {
    display: block;
  }
}

@media (orientation: portrait) {
  .hero {
    padding-block: 24px;
  }
}

从用户最常看到的屏幕方向开始，再添加横屏规则。避免使用固定视口高度，以免键盘或浏览器界面出现时布局错乱。在真机上测试两种方向下的表单和粘性头部。

对于需要响应旋转的 JavaScript（图表、地图、自定义 shell），请监听 screen.orientation change 事件或比较 window.innerHeight 改为 window.innerWidth。尽可能将布局逻辑保留在 CSS 中。

在移动端和 Capacitor 应用中锁定屏幕方向

浏览器将方向锁定视为一种偏好设置。原生应用和 Capacitor 项目可以在旋转会影响任务（登录、支付、kiosk 流程）时，按屏幕强制指定屏幕方向。

本指南中介绍的 @capgo/capacitor-screen-orientation 插件会读取当前模式，为某个路由锁定竖屏，并在用户离开该屏幕时解锁。参见 Screen Orientation 插件文档 有关 API 的详细信息。

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

await ScreenOrientation.lock({ orientation: 'portrait' });

const { type } = await ScreenOrientation.orientation();
console.log(type);

await ScreenOrientation.unlock();

谨慎使用锁定。如果旋转仅改变间距，请调整布局。如果确实需要锁定，请将 lock 以及 unlock 与页面生命周期绑定，以便媒体和设置屏幕仍可使用横屏模式。有关 iOS 和 Android 上更广泛的布局模式，请参阅 Capacitor 应用的跨平台 UI 和 UX 最佳实践.

常见问题

什么是竖屏方向？

竖屏方向是指显示区域的高度大于宽度。高度大于宽度，因此长边垂直运行。手机直立用于阅读、聊天或滚动时，通常处于竖屏模式。

竖屏和横屏方向有什么区别？

竖屏高度大于宽度。横屏宽度大于高度。同一设备在旋转时会在两者之间切换，但宽高比和布局空间会发生变化，因此 UI 应进行适配，而不仅仅是拉伸。

如何在 CSS 中使用 @media (orientation: portrait)？

添加媒体查询，使用 @media (orientation: portrait) { ... } 在视口高度超过宽度时应用样式。将其与横屏布局规则搭配，使用 @media (orientation: landscape) 当你需要同时适配两种形态时。

在手机或应用上，改变方向是什么意思？

改变方向是指旋转设备或允许应用旋转，使屏幕在竖屏和横屏之间切换。在 Web 上，视口尺寸会互换。在原生应用和 Capacitor 应用中，操作系统还可能为过渡添加动画并更新安全区域。

什么是内容方向？

内容方向是指内容相对于外框如何布局，而不只是设备怎么拿。竖屏也可能显示宽图表或带黑边的视频。让布局和媒体匹配任务，而不只是默认的设备角度。

能展示一个竖屏与横屏的示例吗？

可以。竖屏看起来像高大于宽的手机外框。横屏看起来像宽大于高的外框。滚动到下方图表 竖屏与横屏示例 查看带标签的图片。

如果你正在发布 Capacitor 应用，既需要可控的方向行为，也需要发布后的快速修复， Capgo 值得一看。它为 CapacitorJS 和 Electron 应用提供 Live Updates，还维护屏幕方向等应用功能插件，帮你在无需重新构建整个发布流程的情况下锁定或启用特定视图。