Device orientation events

Device orientation events là các sự kiện cho phép bạn phát hiện sự định hướng vật lý của thiết bị và chuyển động của nó.

Khái niệm và cách sử dụng

Thiết bị di động thường có các cảm biến như con quay hồi chuyển (gyroscope), la bàn (compass) và gia tốc kế (accelerometer) có thể cung cấp thông tin về định hướng vật lý và chuyển động của thiết bị.

Các sự kiện định hướng thiết bị cho phép bạn viết các ứng dụng web có thể thay đổi hành vi dựa trên định hướng của thiết bị và phản ứng với chuyển động của người dùng.

Sự kiện

deviceorientation

Kích hoạt khi dữ liệu định hướng mới có sẵn từ cảm biến đo định hướng của thiết bị.

deviceorientationabsolute

Kích hoạt khi dữ liệu định hướng tuyệt đối mới có sẵn từ cảm biến đo định hướng của thiết bị.

devicemotion

Kích hoạt với tốc độ đều đặn, cho biết lượng lực vật lý gia tốc mà thiết bị đang nhận, và tốc độ quay nếu có.

Xử lý sự kiện định hướng thiết bị

Để nhận dữ liệu định hướng, hãy lắng nghe sự kiện deviceorientation:

js
window.addEventListener("deviceorientation", handleOrientation);

function handleOrientation(event) {
  const absolute = event.absolute;
  const alpha = event.alpha; // Xoay quanh trục z (0-360)
  const beta = event.beta; // Xoay quanh trục x (-180 đến 180)
  const gamma = event.gamma; // Xoay quanh trục y (-90 đến 90)

  // Xử lý dữ liệu định hướng
}

Xử lý sự kiện chuyển động thiết bị

Sự kiện devicemotion cung cấp dữ liệu gia tốc:

js
window.addEventListener("devicemotion", handleMotion);

function handleMotion(event) {
  const acceleration = event.acceleration;
  const accelerationWithGravity = event.accelerationIncludingGravity;
  const rotationRate = event.rotationRate;
  const interval = event.interval;

  // Xử lý dữ liệu chuyển động
}

Yêu cầu quyền truy cập (iOS)

Trên thiết bị iOS 13+, bạn cần yêu cầu quyền truy cập trước khi sử dụng sự kiện định hướng thiết bị:

js
function requestPermission() {
  if (
    typeof DeviceOrientationEvent !== "undefined" &&
    typeof DeviceOrientationEvent.requestPermission === "function"
  ) {
    DeviceOrientationEvent.requestPermission()
      .then((permissionState) => {
        if (permissionState === "granted") {
          window.addEventListener("deviceorientation", handleOrientation);
        }
      })
      .catch(console.error);
  } else {
    // Không cần quyền trên Android
    window.addEventListener("deviceorientation", handleOrientation);
  }
}

// Gọi yêu cầu quyền truy cập sau sự kiện người dùng
document
  .getElementById("request-permission")
  .addEventListener("click", requestPermission);

Hướng dẫn

Thông số kỹ thuật

Thông số kỹ thuật
Device Orientation and Motion

Tương thích trình duyệt