在移动设备和现代网页应用中，处理屏幕方向变化是提升用户体验的重要部分。Screen Orientation API 是一个相对冷门的 API，允许开发者获取和锁定设备的屏幕方向，从而在不同的屏幕布局中优化内容呈现。

什么是 Screen Orientation API？

Screen Orientation API 提供了一种访问和控制设备屏幕方向的方式，支持获取当前屏幕方向、监听方向变化事件，以及锁定屏幕方向。这个 API 使开发者能够创建适应不同屏幕方向的应用，改善用户体验。

基本用法1. 获取当前屏幕方向

可以使用 screen.orientation 对象来获取当前的屏幕方向信息：

if (screen.orientation) {
  console.log(`当前方向: ${screen.orientation.type}`); // 例如: "portrait-primary" 或 "landscape-primary"
} else {
  console.log("此浏览器不支持 Screen Orientation API");
}

2. 监听方向变化

可以通过 addEventListener 方法来监听屏幕方向的变化事件：

screen.orientation.addEventListener('change', () => {
  console.log(`方向已更改为: ${screen.orientation.type}`);
});

3. 锁定屏幕方向

使用 screen.orientation.lock() 方法可以锁定屏幕的方向，防止它在用户旋转设备时改变：

async function lockOrientation() {
  try {
    await screen.orientation.lock('portrait'); // 锁定为纵向
    console.log("已锁定屏幕方向为纵向");
  } catch (error) {
    console.error("锁定屏幕方向失败:", error);
  }
}
// 调用函数以锁定屏幕方向
lockOrientation();

应用场景游戏开发：在游戏中，通常需要锁定屏幕方向，以确保游戏界面的布局不受设备旋转影响。视频播放：在观看视频时，锁定为横屏模式可以提供更好的观看体验。移动表单：在用户填写表单时，可能需要锁定屏幕方向，以防止因屏幕旋转而导致的布局混乱。优势注意事项

Screen Orientation API 为 Web 开发提供了一种方便的方式来处理屏幕方向变化，提升了在移动设备上的用户体验。通过合理使用此 API，开发者可以创建更加灵活和用户友好的应用。