deviceorientation

  • Revision slug: Mozilla_event_reference/deviceorientation
  • Revision title: deviceorientation
  • Revision id: 323041
  • Created:
  • Creator: louisremi
  • Is current revision? No
  • Comment

Revision Content

The deviceorientation event is fired when fresh data is available from an orientation sensor about the current orientation of the device as compared to the Earth coordinate frame. See Orientation and motion data explained for details.

General info

Specification
Orientation
Interface
DeviceOrientationEvent
Bubbles
No
Cancelable
No
Target
DefaultView (window)
Default Action
None

Properties

{{OpenEventProperties()}}{{DeviceOrientationEventProperties()}}{{CloseEventProperties()}}

Example

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 );
    }, false);
}

var handleOrientationEvent = function( frontToBack, leftToRight, rotateDegrees ){
    //do something amazing
};

Browser Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support

7.0

3.6

{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support

3.0

3.6

{{ CompatNo() }} 12

4.2

Firefox 3.6, 4, and 5 supported mozOrientation versus the standard DeviceOrientation event

Related Events

See also

Revision Source

<p>The <code>deviceorientation</code> event is fired when fresh data is available from an orientation sensor about the current orientation of the device as compared to the Earth coordinate frame. See <a href="/en-US/docs/DOM/Orientation_and_motion_data_explained">Orientation and motion data explained</a> for details.</p>
<h2 id="General_info">General info</h2>
<dl>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Specification</dt>
  <dd style="margin: 0 0 0 120px;">
    <a class="external" href="http://www.w3.org/TR/orientation-event/#deviceorientation">Orientation</a></dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Interface</dt>
  <dd style="margin: 0 0 0 120px;">
    DeviceOrientationEvent</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Bubbles</dt>
  <dd style="margin: 0 0 0 120px;">
    No</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Cancelable</dt>
  <dd style="margin: 0 0 0 120px;">
    No</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Target</dt>
  <dd style="margin: 0 0 0 120px;">
    DefaultView (<code>window</code>)</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Default Action</dt>
  <dd style="margin: 0 0 0 120px;">
    None</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p>{{OpenEventProperties()}}{{DeviceOrientationEventProperties()}}{{CloseEventProperties()}}</p>
<h2 id="Example">Example</h2>
<pre class="brush: 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 );
    }, false);
}

var handleOrientationEvent = function( frontToBack, leftToRight, rotateDegrees ){
    //do something amazing
};
</pre>
<h2 id="Browser_Compatibility">Browser Compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>
          <p>7.0</p>
        </td>
        <td>
          <p>3.6</p>
        </td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>
          <p>3.0</p>
        </td>
        <td>
          <p>3.6</p>
        </td>
        <td>{{ CompatNo() }}</td>
        <td>12</td>
        <td>
          <p>4.2</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<p>Firefox 3.6, 4, and 5 supported <a href="/en/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>versus the standard DeviceOrientation event</p>
<h2>Related Events</h2>
<ul>
  <li><a href="/en-US/docs/Mozilla_event_reference/devicemotion"><code>devicemotion</code></a></li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ domxref("DeviceMotionEvent") }}</li>
  <li>{{ domxref("window.ondeviceorientation") }}</li>
  <li><a href="/en/Detecting_device_orientation" title="Detecting device orientation">Detecting device orientation</a></li>
  <li><a href="/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
  <li>Simulating orientation events on desktop browsers with the <a href="http://louisremi.github.com/orientation-devtool/" title="http://louisremi.github.com/orientation-devtool/">orientation-devtool</a></li>
</ul>
Revert to this revision