这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
Increasingly, web-enabled devices are capable of determining their orientation ; that is, they can report data indicating changes to their orientation with relation to the pull of gravity. In particular, hand-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height.
There are two JavaScript events that handle orientation information. The first one is the
DeviceOrientationEvent
, which is sent when the accelerometer detects a change to the orientation of the device. By receiving and processing the data reported by these orientation events, it's possible to interactively respond to rotation and elevation changes caused by the user moving the device.
The second event is the
DeviceMotionEvent
, which is sent when a change in acceleration was added. It is different from the
DeviceOrientationEvent
because it is listening for changes in acceleration as opposed to orientation. Sensors that are commonly capable of detecting
DeviceMotionEvent
include sensors in laptops to protect moving storage devices.
DeviceOrientationEvent
is more commonly found in mobile devices.
All you need to do in order to begin receiving orientation change is to listen to the
deviceorientation
event:
注意 : gyronorm.js is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices. This is useful for overcoming some of the differences in device support for device orientation.
window.addEventListener("deviceorientation", handleOrientation, true);
After registering your event listener (in this case, a JavaScript function called handleOrientation()), your listener function periodically gets called with updated orientation data.
The orientation event contains four values:
DeviceOrientationEvent.absolute
DeviceOrientationEvent.alpha
DeviceOrientationEvent.beta
DeviceOrientationEvent.gamma
The event handler function can look something like this:
function handleOrientation(event) {
var absolute = event.absolute;
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
// Do stuff with the new orientation data
}
The value reported for each axis indicates the amount of rotation around a given axis in reference to a standard coordinate frame. These are described in greater detail in the Orientation and motion data explained article which is summarized below.
DeviceOrientationEvent.alpha
value represents the motion of the device around the z axis, represented in degrees with values ranging from 0 to 360.
DeviceOrientationEvent.beta
value represents the motion of the device around the x axis, represented in degrees with values ranging from -180 to 180. This represents a front to back motion of the device.
DeviceOrientationEvent.gamma
value represents the motion of the device around the y axis, represented in degrees with values ranging from -90 to 90. This represents a left to right motion of the device.
This example will work on any browser supporting the
deviceorientation
event and running on a device able to detect its orientation.
So let's imagine a ball in a garden:
<div class="garden"> <div class="ball"></div> </div> <pre class="output"></pre>
This garden is 200 pixel wide (Yes, it's a tiny one), and the ball is in the center:
.garden {
position: relative;
width : 200px;
height: 200px;
border: 5px solid #CCC;
border-radius: 10px;
}
.ball {
position: absolute;
top : 90px;
left : 90px;
width : 20px;
height: 20px;
background: green;
border-radius: 100%;
}
Now, if we move our device, the ball will move accordingly:
var ball = document.querySelector('.ball');
var garden = document.querySelector('.garden');
var output = document.querySelector('.output');
var maxX = garden.clientWidth - ball.clientWidth;
var maxY = garden.clientHeight - ball.clientHeight;
function handleOrientation(event) {
var x = event.beta; // In degree in the range [-180,180]
var y = event.gamma; // In degree in the range [-90,90]
output.innerHTML = "beta : " + x + "\n";
output.innerHTML += "gamma: " + y + "\n";
// Because we don't want to have the device upside down
// We constrain the x value to the range [-90,90]
if (x > 90) { x = 90};
if (x < -90) { x = -90};
// To make computation easier we shift the range of
// x and y to [0,180]
x += 90;
y += 90;
// 10 is half the size of the ball
// It center the positioning point to the center of the ball
ball.style.top = (maxY*y/180 - 10) + "px";
ball.style.left = (maxX*x/180 - 10) + "px";
}
window.addEventListener('deviceorientation', handleOrientation);
Click here
to open this example in a new window; because
deviceorientation
doesn't work in a cross-origin
<iframe>
in all browsers.
警告： Chrome and Firefox do not handle the angles the same way, so on some axes the direction are reversed.
Motion events are handled the same way as the orientation events except that they have their own event's name:
devicemotion
window.addEventListener("devicemotion", handleMotion, true);
What's really changed are the information provided within the
DeviceMotionEvent
object passed as a parameter of the
HandleMotion
函数。
The motion event contains four properties:
DeviceMotionEvent.acceleration
DeviceMotionEvent.accelerationIncludingGravity
DeviceMotionEvent.rotationRate
DeviceMotionEvent.interval
DeviceMotionEvent
objects provide web developers with information about the speed of changes for the device's position and orientation. The changes are provided along three axis (see
Orientation and motion data explained
了解细节)。
For
acceleration
and
accelerationIncludingGravity
, those axes correspond to the following:
x
: Represents the axis from West to East
y
: Represents the axis from South to North
z
: Represents the axis perpendicular to the ground
For
rotationRate
, the situation is a bit different; the information corresponds to the following in each case:
alpha
: Represents a rotation rate along the axis perpendicular to the screen (or keyboard for desktop).
beta
: Represents a rotation rate along the axis going from left to right of the plane of the screen (or keyboard for desktop).
gamma
: Represents a rotation rate along the axis going from bottom to top of the plane of the screen (or keyboard for desktop).
最后，
interval
represents the interval of time, in milliseconds, at which data are obtained from the device.
| 规范 | 状态 | 注释 |
|---|---|---|
| DeviceOrientation Event Specification | 编者草案 | 最初的规范。 |
DeviceMotionEvent
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DeviceMotionEvent
|
Chrome 11 | Edge ≤18 | Firefox 6 | IE No | Opera 15 | Safari 5 | WebView Android ≤37 | Chrome Android 18 | Firefox Android 6 | Opera Android 14 | Safari iOS 4.2 | Samsung Internet Android 1.0 |
DeviceMotionEvent()
构造函数
非标
|
Chrome 59 | Edge ≤79 | Firefox ? | IE No | Opera ? | Safari ? | WebView Android 59 | Chrome Android 59 | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android 7.0 |
acceleration
|
Chrome Yes | Edge 12 | Firefox 6 | IE No | Opera Yes | Safari ? | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android ? | Safari iOS 4.2 | Samsung Internet Android Yes |
accelerationIncludingGravity
|
Chrome Yes | Edge 12 | Firefox 6 | IE No | Opera Yes | Safari ? | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS 4.2 | Samsung Internet Android Yes |
interval
|
Chrome Yes | Edge 12 | Firefox 6 | IE No | Opera Yes | Safari ? | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS 4.2 | Samsung Internet Android Yes |
rotationRate
|
Chrome Yes | Edge 12 | Firefox 6 | IE No | Opera Yes | Safari ? | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS 4.2 | Samsung Internet Android Yes |
完整支持
不支持
兼容性未知
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
DeviceOrientationEvent
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DeviceOrientationEvent
|
Chrome
7
|
Edge ≤18 |
Firefox
6
|
IE No | Opera 15 | Safari 5 |
WebView Android
≤37
|
Chrome Android
18
|
Firefox Android
6
|
Opera Android 14 | Safari iOS 4.2 |
Samsung Internet Android
1.0
|
DeviceOrientationEvent()
构造函数
非标
|
Chrome 59 | Edge ≤79 | Firefox ? | IE No | Opera ? | Safari ? | WebView Android 59 | Chrome Android 59 | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android 7.0 |
absolute
|
Chrome 7 | Edge 12 | Firefox 6 | IE No | Opera Yes | Safari ? | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS 4.2 | Samsung Internet Android Yes |
alpha
|
Chrome 7 | Edge 12 | Firefox 6 | IE No | Opera Yes | Safari ? | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS 4.2 | Samsung Internet Android Yes |
beta
|
Chrome 7 | Edge 12 | Firefox 6 | IE No | Opera Yes | Safari ? | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS 4.2 | Samsung Internet Android Yes |
gamma
|
Chrome 7 | Edge 12 | Firefox 6 | IE No | Opera Yes | Safari ? | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS 4.2 | Samsung Internet Android Yes |
完整支持
不支持
兼容性未知
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
见实现注意事项。
DeviceOrientationEvent
DeviceMotionEvent
MozOrientation
事件。