如何使用 JavaScript 操作设备的屏幕方向 (Screen Orientation API)？

推荐答案

Screen Orientation API 允许 Web 开发者控制和读取设备的屏幕方向。主要涉及以下几个方面：

1. 获取当前屏幕方向： 使用 screen.orientation.type 属性可以获取当前的屏幕方向，返回值为字符串，例如 "portrait-primary", "portrait-secondary", "landscape-primary", "landscape-secondary"。

2. 监听屏幕方向变化： 通过 screen.orientation.addEventListener('change', callback) 可以监听屏幕方向的变化，回调函数 callback 会在屏幕方向改变时被调用。

3. 锁定屏幕方向： 使用 screen.orientation.lock(orientation) 方法可以锁定屏幕方向，orientation 参数可以是 "portrait", "landscape", "portrait-primary", "portrait-secondary", "landscape-primary", "landscape-secondary"。该方法返回一个 Promise，成功锁定后会 resolve。

4. 解除屏幕方向锁定： 使用 screen.orientation.unlock() 方法可以解除之前通过 lock() 方法设置的屏幕方向锁定。

以下是一个简单的示例：

// www.javascriptcn.com code example
// 获取当前屏幕方向
console.log("Current orientation:", screen.orientation.type);

// 监听屏幕方向变化
screen.orientation.addEventListener('change', () => {
  console.log("Orientation changed to:", screen.orientation.type);
});

// 锁定屏幕方向为横屏
async function lockLandscape() {
  try {
    await screen.orientation.lock('landscape');
    console.log('Screen orientation locked to landscape.');
  } catch (error) {
    console.error('Failed to lock screen orientation:', error);
  }
}

// 解除屏幕方向锁定
function unlockOrientation() {
    screen.orientation.unlock();
    console.log("Screen orientation unlocked.");
}

// 示例调用
// lockLandscape();
// setTimeout(unlockOrientation, 5000); // 5秒后解锁

本题详细解读

Screen Orientation API 提供了一种机制，允许 Web 应用与设备的屏幕方向进行交互。该 API 主要用于创建对设备方向变化敏感的用户体验，例如，游戏，视频播放器等。

核心接口

1. screen.orientation 对象: 这是 API 的入口点，通过 window.screen.orientation 获取。它包含以下重要的属性和方法。

   • type 属性： 返回一个字符串，表示当前的屏幕方向。可能的值包括：

     • "portrait-primary"： 竖屏模式，设备主要方向朝上（例如，手机顶部朝上）。
     • "portrait-secondary"： 竖屏模式，设备主要方向朝下（例如，手机底部朝上）。
     • "landscape-primary"： 横屏模式，设备主要方向朝左。
     • "landscape-secondary"： 横屏模式，设备主要方向朝右。

   • angle 属性: 返回屏幕方向的角度，例如 0（竖屏）， 90（横屏）。

   • addEventListener('change', callback) 方法： 用于注册一个监听器，当屏幕方向改变时，会调用指定的回调函数。 回调函数参数不携带任何数据。

   • lock(orientation) 方法： 用于锁定屏幕方向，防止用户通过旋转设备改变屏幕方向。该方法返回一个 Promise，成功锁定则 resolve，失败则 reject。

     • orientation 参数可以取的值：
       • "portrait"： 锁定为竖屏，具体是哪个方向(primary or secondary)由设备决定。
       • "landscape"： 锁定为横屏，具体是哪个方向(primary or secondary)由设备决定。
       • "portrait-primary"： 锁定为竖屏，设备主要方向朝上。
       • "portrait-secondary"： 锁定为竖屏，设备主要方向朝下。
       • "landscape-primary"： 锁定为横屏，设备主要方向朝左。
       • "landscape-secondary"： 锁定为横屏，设备主要方向朝右。

   • unlock() 方法： 用于解锁之前锁定的屏幕方向。

使用场景

• 全屏游戏： 锁定为横屏或竖屏，提供沉浸式游戏体验。
• 视频播放器： 根据用户旋转设备自动切换横竖屏播放模式。
• 图片浏览器： 优化不同方向的图片显示。
• 地图应用： 根据用户设备方向调整地图视图。

注意事项

• 浏览器支持： Screen Orientation API 不是所有浏览器都支持，使用前应进行浏览器兼容性检测。 可以使用 'orientation' in screen 判断当前浏览器是否支持此 API.
• 用户体验： 强制锁定屏幕方向可能会影响用户体验，应谨慎使用，并在必要时提供解除锁定的机制。
• 权限： 锁定屏幕方向可能需要用户权限，确保处理好权限请求和错误情况。
• 移动端为主: 该 API 主要用于移动设备, 在PC端或部分浏览器中可能行为不一致。
• 异步操作: lock() 方法是一个异步方法，必须使用 async/await 或 Promise.then() 来处理结果。