{{apiref("Device Orientation Events")}}{{SeeCompatTable}}
The DeviceOrientationEvent
provides web developers with information from the physical orientation of the device running the web page.
Warning: Currently, Firefox and Chrome does not handle the coordinates the same way. Take care about this while using them.
Properties
- {{domxref("DeviceOrientationEvent.absolute")}} {{readonlyinline}}
- A boolean that indicates whether or not the device is providing orientation data absolutely.
- {{domxref("DeviceOrientationEvent.alpha")}} {{readonlyinline}}
- A number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360
- {{domxref("DeviceOrientationEvent.beta")}} {{readonlyinline}}
- A number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180. This represents a front to back motion of the device.
- {{domxref("DeviceOrientationEvent.gamma")}} {{readonlyinline}}
- A number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90. This represents a left to right motion of the device.
Example
window.addEventListener('deviceorientation', function(event) { console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma); });
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Initial specification. |
Browser compatibility
Compatibility for DeviceOrientationEvent:
{{ CompatibilityTable() }}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 7.0 | 3.6 (mozOrientation), 6 |
{{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 3.0 | 3.6 (mozOrientation), 6 |
{{ CompatNo() }} | {{ CompatNo() }} | 4.2 |
Gecko-specific notes
Firefox 3.6, 4, and 5 supported mozOrientation instead of the standard DeviceOrientationEvent
interface
See also
- {{ event("deviceorientation") }}
- {{ domxref("DeviceMotionEvent") }}
- {{ event("devicemotion") }}
- Detecting device orientation
- Orientation and motion data explained