deviceorientation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 2023 г..

Learn more
See full compatibility

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

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

Спецификация: Событие DeviceOrientation
Определение: DeviceOrientationEvent
Всплывает: Нет
Отменяемо: Нет
Целевой элемент: По умолчанию (window)
Действие по умолчанию: Нет

Свойства

Property	Type	Description
`target` Только для чтения	`EventTarget`	The event target (the topmost target in the DOM tree).
`type` Только для чтения	`String`	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`.

Пример

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,
) {
 // Сделайте что-нибудь необычное здесь
};