Screen Orientation API 屏幕方向

Screen Orientation API：screen.orientation.type获取方向(portrait-primary/landscape-primary)、orientationchange事件监听、screen.orientation.lock('landscape')锁定方向（需全屏）、移动端横竖屏适配 · 难度：入门 · +10XP

Screen Orientation API —— 控制屏幕方向

网页可以读取和锁定屏幕的方向（横屏或竖屏）——这在游戏、视频播放器中非常有用。

读取和锁定方向

// 读取当前方向
console.log(screen.orientation.type); // 'portrait-primary'或'landscape-primary'
screen.orientation.addEventListener('change', () => {
  console.log('方向变了：', screen.orientation.type);
});
// 锁定为横屏（需要全屏）
await screen.orientation.lock('landscape');
// 解锁
screen.orientation.unlock();

动手练习

1. 基础练习：在页面上显示当前屏幕方向，旋转手机观察变化。
2. 进阶应用：做一个视频播放器——点击全屏时锁定为横屏。
3. 项目实战：在移动端游戏中用屏幕方向API控制游戏体验。