deviceorientation

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Событие deviceorientation срабатывает, когда с сенсоров ориентации поступают новые данные о текущем положении устройства внутри Земной системы координат. Эти данные собираются с помощью магнитометра устройства. Более детальное объяснение дано в Ориентация и объяснение данных движения.

Общая информация

Свойства

Property Type Description
target Только для чтения EventTarget The event target (the topmost target in the DOM tree).
type Только для чтения DOMString The type of event.
bubbles Только для чтения Boolean Whether the event normally bubbles or not
cancelable Только для чтения Boolean Whether the event is cancellable or not?
alpha Только для чтения double (float) The current orientation of the device around the Z axis; that is, how far the device is rotated around a line perpendicular to the device.
beta Только для чтения double (float) The current orientation of the device around the X axis; that is, how far the device is tipped forward or backward.
gamma Только для чтения double (float) The current orientation of the device around the Y axis; that is, how far the device is turned left or right.
absolute Только для чтения boolean This value is true if the orientation is provided as a difference between the device coordinate frame and the Earth coordinate frame; if the device can't detect the Earth coordinate frame, this value is false.

Пример

js
if (window.DeviceOrientationEvent) {
  window.addEventListener(
    "deviceorientation",
    function (event) {
      // alpha: rotation around z-axis
      var rotateDegrees = event.alpha;
      // gamma: left to right
      var leftToRight = event.gamma;
      // beta: front back motion
      var frontToBack = event.beta;

      handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
    },
    true,
  );
}

var handleOrientationEvent = function (
  frontToBack,
  leftToRight,
  rotateDegrees,
) {
  // Сделайте что-нибудь необычное здесь
};

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
deviceorientation event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

Похожие события

Смотрите также