Window: 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.
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
deviceorientation
イベントは、端末の現在の向きを地球座標フレームと比較した場合に、方角センサーから最新のデータが得られた場合に発生します。このデータは端末内部の方位磁針から収集されます。
詳しくは方向および動きとして示されるデータを参照してください。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("deviceorientation", (event) => {});
ondeviceorientation = (event) => {};
イベント型
DeviceOrientationEvent
です。 Event
から継承しています。
イベントプロパティ
DeviceOrientationEvent.absolute
読取専用-
論理値で、端末が絶対に方向データを提供するかどうかを示します。
DeviceOrientationEvent.alpha
読取専用-
数値で、端末の Z 軸の回転量を表し、 0 (含む)から 360 (含まない)までの範囲の値で表します。
DeviceOrientationEvent.beta
読取専用-
数値で、端末の X 軸の回転量を表し、 -180 (含む)から 180 (含まない)までの範囲の値で表します。これは端末の前後方向の動きを表します。
DeviceOrientationEvent.gamma
読取専用-
数値で、端末の Y 軸の回転量を表し、 -90 (含む)から 90 (含まない)までの範囲の値で表します。これは端末の左右方向の動きを表します。
DeviceOrientationEvent.webkitCompassHeading
非標準 読取専用-
数値で、ワールドシステムの Z 軸を中心とした端末の動きと北の方向との差を表し、 0 から 360 の範囲の値で度数で表します。
DeviceOrientationEvent.webkitCompassAccuracy
非標準 読取専用-
コンパスの精度で、偏差が正の値または負の値を意味しています。通常は 10 です。
例
if (window.DeviceOrientationEvent) {
window.addEventListener(
"deviceorientation",
(event) => {
const rotateDegrees = event.alpha; // alpha: rotation around z-axis
const leftToRight = event.gamma; // gamma: left to right
const frontToBack = event.beta; // beta: front back motion
handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
},
true,
);
}
const handleOrientationEvent = (frontToBack, leftToRight, rotateDegrees) => {
// do something amazing
};
仕様書
Specification |
---|
Device Orientation and Motion # deviceorientation |
Device Orientation and Motion # ref-for-dom-window-ondeviceorientation |
ブラウザーの互換性
BCD tables only load in the browser