Screen Orientation API 与响应式体验
把方向变化当作响应式布局状态，同时保留可访问性、用户选择与隐私边界。
Screen Orientation API 让网页观察当前方向，并在支持的环境中请求首选方向。响应式设计应把方向当作会变化的布局条件，而不是设备标签。手机可以朝任一方向拿着，笔记本窗口可以调整，分屏窗口也可能比屏幕窄。应依据页面实际可用空间布局，保留用户任务，只在方向会改变可见产品决策时使用方向信息。
W3C Screen Orientation 规范定义方向对象、type、angle、变化事件以及锁定方向的条件。MDN Screen Orientation API 参考说明浏览器接口和兼容性。来源说明浏览器可能公开的能力，并不要求产品锁定屏幕或收集方向历史。
把方向视为布局状态
screen.orientation.type 描述 portrait-primary 或 landscape-primary 等当前方向类别，angle 报告相对自然方向的角度。旋转期间两者都可能变化，事件顺序取决于浏览器和操作系统。布局应等待视口稳定，而不是假设一个事件就是完整转换。
大多数布局决策应放在 CSS 中。(orientation: portrait) 媒体查询可以切换网格，容器查询可以让组件在分屏或嵌入文档中响应自身宽度。只有在调整画布或游戏棋盘等行为无法用 CSS 表达时，JavaScript 才使用 matchMedia 或方向对象。分支应绑定可见结果，而不是设备目录。
方向不能告诉应用这是手机、平板、桌面还是远程会话。浏览器界面、窗口管理、缩放、辅助功能和虚拟键盘都会改变有效空间。桌面窗口的窄视口仍是有效状态。不要从方向推断身份、位置、年龄或能力。
旋转时保留任务
旋转发生在阅读、编辑或填写表单过程中。保留已输入数据、仍然有意义的滚动位置、选中的标签和焦点控件。不要因为方向变化重建页面或导航。如果组件必须重建，应明确恢复焦点，只在状态确实有意义时播报。
使用弹性轨道、可换行标签、响应式图片和以内容为依据的断点。窄时双列表单可变为单列；宽表格可展示优先列，并提供键盘可操作的溢出视图。纵向隐藏的控件必须在当前布局有等效操作。关键任务不能只依赖某个方向的手势。
虚拟键盘、浏览器工具栏或分屏分隔线会遮住内容，使视觉视口不同于布局视口。保持活动字段可见，避免固定底部操作被遮挡，并在视觉视口变化时重新放置对话框。CSSOM View 规范提供几何概念，但应用仍需保证可操作结果。
只为真实需求请求方向
screen.orientation.lock() 是请求，不是通用命令。规范和浏览器文档说明文档可见性、浏览上下文、用户激活、全屏和平台政策等限制。调用可能拒绝，浏览器也可能不执行。请求不可用时页面必须仍可使用。
游戏棋盘、相机预览或确实依赖稳定宽高比的演示可以考虑锁定。请求前说明影响，提供明显退出方式，任务结束时释放锁。不要为了简化桌面布局、分类访问者或阻止响应式适配而锁定。
改变整个显示模式应从明确用户操作开始。链接打开的页面不应突然旋转或把用户困在模式中。浏览器拒绝请求时显示普通响应式布局并保留任务。失败是兼容性结果，不代表设备或用户信息。
使用事件避免竞态
方向对象提供 change 事件。处理器应读取当前状态，只更新受影响组件，并容忍重复通知。若组件依赖实际空间，可与 resize 或视觉视口观察结合；方向变化和视口变化相关但并不等同。
避免在事件处理器中执行昂贵同步工作。安排有界更新，取消过时任务，保持旋转时输入响应。媒体、地图或画布需要新尺寸时，应保留语义内容，只改变渲染尺寸。重绘失败也应留下可用替代，而不是空白区域。
用特性检测保护可选行为，检查 screen.orientation 和目标方法，捕获 lock() 被拒绝的 promise。CSS 媒体查询和普通 resize 处理是合理回退。API 不存在时不要静默收集方向、角度、视口和屏幕值。
让可访问性与控制保持可见
响应式重排必须保留语义标题、地标、标签和逻辑阅读顺序。方向变化后测试键盘导航，包括视觉视口边缘附近的焦点环。只有在控件确实移动等情况下才向读屏器播报有用状态，不必播报每次原始角度。
同时尊重缩放、文字放大、减少动画和高对比度或强制颜色模式。默认比例能容纳的布局，在横向放大文字或键盘打开时仍可能失败。保持点击目标、对比度和错误信息可用。WCAG 2.2是这些结果的参考，方向本身不决定符合性。
方向依赖模式必须有可见退出入口。“返回响应式视图”应可用键盘操作且不清除工作。说明旋转由浏览器或操作系统控制时应用只是请求偏好。不要暗示拒绝锁定说明用户错误配置浏览器。
测试行为而非设备类别
测试矩阵应围绕用户结果：纵向和横向、窄和宽窗口、放大文字、虚拟键盘、键盘和触摸输入、减少动画，以及不实现 API 的浏览器。每个场景都验证阅读内容、到达主要操作、恢复错误和离开锁定模式；加入最容易换行失败的中间宽度。
记录浏览器版本、视口、方向和偏好作为测试配置。截图或自动运行只证明该配置，不是运行者稳定特征。使用合成夹具，不要把原始方向历史发送到分析服务。确需遥测时，优先记录“打开了紧凑导航”等聚合结果，而非角度、尺寸和时序集合。
建立隐私友好的响应式契约
读取方向属性前写明支持的用户决策，例如“组件足够宽时把预览放在控件旁”。优先 CSS 和本地 matchMedia，让值不离开浏览器。若服务确实需要结果改进产品，应记录目的、保留时间、访问者和用户选择，并移除不影响决策的原始角度和尺寸。
方向与其他值结合可能成为指纹，但响应式布局不需要建立此类档案。不要把纵向或横向作为账户、风控或资格信号。共享电脑、旋转显示器、模拟器和调整大小的窗口都能产生相同值。值缺失或粗略是正常情况，保留基础体验。
应把视觉视口与方向分开检查：旋转后浏览器工具栏或键盘可能遮住字段。安全区域和临时覆盖属于渲染限制，不是设备的永久属性。
为每个响应式状态定义结果，例如键盘用户打开并关闭菜单时不丢失焦点，预览改变大小后字幕和主要操作仍可用。结果比设备型号列表更稳定，也便于浏览器实现变化时复查支持说明。
实验和分析也应记录任务结果，而不是原始角度、完整尺寸和时间组成的用户档案。实验分组应独立于锁定请求，用户拒绝模式时仍能使用基础界面。
增加方向相关功能时复查契约，删除不再支持可见决策的属性，并确认翻译保留条件语气和可访问回退。
可访问回退是功能的一部分，应保留相同标题、标签和任务数据。锁定被拒绝后，用户仍能在纵向或调整后的窗口继续。
方向选择应可撤销。明确的用户偏好应与浏览器观察分开保存，并提供重置操作，不要把偏好变成设备结论。
回退界面也应保留相同的错误恢复路径，并明确下一步操作。
回退还应显示状态和下一步，避免兼容性结果让读者陷入无路可走。
组件无法获得预期宽高比时，控件仍应可见且可操作。
实用清单
- 普通重排使用 CSS 或容器查询，JavaScript 只处理有界行为。
- 旋转时保留表单值、焦点、阅读顺序和恢复控件。
- 仅在用户操作后请求锁定，拒绝时使用响应式回退。
- 在两种方向测试缩放、键盘、辅助技术和中间窄宽度。
- 除非有记录在案且可选的产品决策，否则让方向测量留在本地。
规划转换与恢复
方向变化可能与路由、网络请求或校验错误同时发生。保持这些状态独立，保存草稿并让布局围绕它变化。媒体、画布和嵌入组件应保留语义内容、字幕、焦点和任务；无法容纳时提供可读替代。旋转不应改变 URL、重复提交表单或清除输入。服务端渲染可以先使用保守布局，客户端确认视口时不要替换用户文字。优先容器查询处理 iframe、侧栏和可调整编辑器。动画应可中断并尊重减少动画偏好。支持文档说明浏览器可能拒绝锁定，不承诺统一的角度和事件顺序。排查问题时记录可见结果、路由、浏览器、视口和方向，不收集完整屏幕清单或持久标识符。