Screen Orientation 与 Fullscreen 交互适配：旋转监听、锁定与沉浸体验实践

背景与价值旋转与全屏适配提升媒体与互动场景的沉浸与一致性；方向锁定需谨慎并尊重用户选择。旋转监听function onOrientationChange() { const o = (screen.orientation && screen.orientation.type) || 'unknown'; // 根据 o: 'landscape-primary' | 'portrait-primary' 等进行布局调整 } screen.orientation?.addEventListener('change', onOrientationChange); 锁定与解锁（用户手势触发）async function lockLandscape() { try { await (screen.orientation as any).lock('landscape'); return { ok: true }; } catch (e) { return { ok: false, error: String(e) }; } } function unlockOrientation() { (screen.orientation as any).unlock?.(); } 全屏沉浸async function enterFullscreen(el: HTMLElement) { if (el.requestFullscreen) await el.requestFullscreen(); } async function exitFullscreen() { if (document.fullscreenElement) await document.exitFullscreen(); } 指标验证（Chrome 128/Edge 130/Android）全屏进入耗时（P95）：≤ 250ms。旋转响应：布局调整完成 ≤ 120ms。失败率：锁定失败 ≤ 3%（权限与设备策略导致）。回退策略不支持锁定：提示用户手动旋转与全屏入口；保持基本可用。测试清单视频/游戏场景：进入/退出全屏与旋转响应正确；锁定与解锁路径清晰。