屏幕方向锁定测试

Screen Orientation API 是一个Web标准接口，允许开发者读取设备的当前屏幕方向（横屏或竖屏），并在支持的设备上锁定或解锁屏幕方向。它通过 screen.orientation 对象暴露方向和锁定功能，主要包含 type（方向类型）、angle（旋转角度）、lock()（锁定）和 unlock()（解锁）等属性和方法。该API在移动端Web应用、游戏、视频播放器等场景中广泛应用。

使用 screen.orientation.lock('portrait') 或 screen.orientation.lock('landscape') 来锁定方向。锁定失败常见原因包括：
1. 桌面端浏览器 — 桌面设备通常没有方向传感器，API会抛出 NotSupportedError；
2. 非全屏模式 — 部分移动浏览器（尤其是Android Chrome）要求页面处于全屏状态才能锁定方向；
3. 非HTTPS环境 — 部分浏览器要求安全上下文；
4. 非用户手势 — lock() 必须在用户交互（如点击）的回调中调用，不能在页面加载时自动触发；
5. iOS限制 — iOS Safari对方向锁定的支持较为有限，建议使用PWA模式。

Screen Orientation API 定义了以下锁定类型：
"portrait-primary" — 竖屏主方向（设备自然竖屏状态）；
"portrait-secondary" — 竖屏次方向（倒转180°）；
"landscape-primary" — 横屏主方向（从竖屏向左旋转90°）；
"landscape-secondary" — 横屏次方向（从竖屏向右旋转90°）；
"portrait" — 任意竖屏方向（primary + secondary）；
"landscape" — 任意横屏方向（primary + secondary）；
"any" — 任意方向；
"natural" — 设备自然方向。不同浏览器对各类型的支持程度不同，移动端Chrome支持最全面。

orientationchange 事件是较旧的方法，在 window 上触发，配合 window.orientation 获取角度值（0/90/-90/180）。这是iOS Safari长期使用的方式，但在现代浏览器中正被逐步淘汰。
Screen Orientation API 的 change 事件是标准方法，在 screen.orientation 上触发，提供更精确的方向类型和角度。
matchMedia('(orientation: portrait)') 是CSS媒体查询的JavaScript版本，兼容性极好，几乎所有浏览器都支持，可以用来检测方向但不提供角度信息，也无法锁定方向。推荐使用 matchMedia 作为方向检测的兜底方案。

iOS Safari 从 iOS 16 开始支持 Screen Orientation API 的基本功能（读取方向类型和角度），但 lock() 方法的支持非常有限。在iOS上，方向锁定主要通过以下方式实现：
1. 使用 webkitRequestFullscreen 进入全屏后再尝试锁定；
2. 将Web应用添加到主屏幕（PWA模式），通过 apple-mobile-web-app-capable meta标签启用全屏模式，配合CSS的 @media (orientation: ...) 进行适配；
3. 使用 window.orientation 和 orientationchange 事件作为兼容方案。实际项目中，建议针对iOS做降级处理，依赖CSS媒体查询进行布局适配。

在PWA（渐进式Web应用）中，可以通过 Web App Manifest 文件设置 "orientation": "portrait" 或 "orientation": "landscape" 来指定应用的首选方向。Manifest中的设置优先级较高，配合 Screen Orientation API 可以实现更可靠的方向控制。此外，PWA在移动设备上可以隐藏浏览器UI，提供更接近原生应用的体验。建议同时设置 "display": "standalone" 或 "display": "fullscreen" 以最大化方向控制的效果。

screen.orientation.angle 表示设备相对于其自然方向的旋转角度，取值固定为 0、90、180、270：
0° — 设备处于自然方向（通常是竖屏）；
90° — 设备从自然方向顺时针旋转90°（通常对应横屏）；
180° — 设备倒转（竖屏倒置）；
270° — 设备从自然方向逆时针旋转90°（横屏另一方向）。
旧版 window.orientation 使用 -90 代替 270。两者的对应关系为：window.orientation = (360 - screen.orientation.angle) % 360，当结果为180以上时减去360。

在桌面端，Screen Orientation API 的读取功能仍然可用：可以查看当前方向类型（通常为 landscape-primary）和角度（通常为0°）。但方向锁定功能在桌面端基本不可用，因为桌面设备缺乏物理方向传感器。桌面端访问此工具主要用于：了解API的基本结构、查看兼容性信息、阅读FAQ知识点、为移动端开发做准备。要完整体验方向锁定功能，建议使用手机或平板访问此页面。