方向

要求内容

如果网站或应用强制设备进入竖屏或横屏模式，那些将手机或平板固定在特定方向的用户——轮椅托盘、病床、人体工学支架——将被拒之门外。除非内容从本质上要求特定方向（如钢琴键盘、支票存款照片、沉浸式 VR 体验），否则网站必须适应设备所处的任意方向。

如何满足要求

• 不要使用 @media (orientation: portrait) { display: none; } 等 CSS 在单一方向外隐藏网站。
• 在网页端避免使用屏幕方向锁定 API（screen.orientation.lock('portrait')）；在原生应用中，仅在必要时进行锁定。
• 构建同时适应两种方向的响应式布局——Flexbox 和 CSS Grid 无需特殊处理即可实现。
• 在真实手机上旋转测试——许多问题只在横屏视口较短的设备上才会显现。
• 对于必须锁定方向的场景（如签名板），须向用户清晰说明原因和旋转方法。

常见失败示例

• “请将设备旋转至竖屏”的遮罩层，在平板横屏时阻断所有内容。
• 应用在无功能理由的情况下设置 android:screenOrientation="portrait"。
• 银行网站竖屏正常，横屏却呈现破损布局且无修复方案。
• 引导流程检测到横屏后强制显示”请旋转手机”插页。

重要性

此准则尤其影响使用电动轮椅的用户——固定在轮椅上的平板电脑锁定于单一方向。同样影响单手使用手机并开启屏幕方向锁定的用户。在设计阶段修复成本极低，若整个布局从一开始按竖屏构建则事后改造代价高昂。