Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Screen orientation

Screen Orientation API の ScreenOrientation インターフェイスは、文書の現在の向きの情報を提供します。

ScreenOrientation オブジェクトのインスタンスは、screen.orientation プロパティで取得できます。

EventTarget ScreenOrientation

デバイス・センサー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
ScreenOrientation
38
79
43
16.4
38
16.4
orientation

orientation は Screen インターフェイスの読み取り専用プロパティで、現在の画面の向きを返します。
38
79
43
16.4
39
16.4
angle

ScreenOrientation インターフェイスの読み取り専用プロパティ angle は、文書の現在の向きの角度を返します。
38
79
43
16.4
38
16.4
change_event

change イベントは ScreenOrientation インターフェイスのイベントで、ユーザーがモバイル端末を回転させたときなど、画面の向きが変更されたときに発生します。
38
79
43
16.4
38
16.4
type

ScreenOrientation の読み取り専用プロパティ type は、文書の現在の向きのタイプを返します。"portrait-primary"、"portrait-secondary"、"landscape-primary"、"landscape-secondary" のいずれかです。
38
79
43
16.4
38
16.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: ms (12)
実装メモ
  • Edgeは`Orientation`オブジェクトを返さず、代わりにオリエンテーションの型を文字列として返します。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: moz (14)

基本構文

JAVASCRIPT 
screen.orientation.addEventListener("change", (event) => {
  const type = event.target.type;
  const angle = event.target.angle;
  console.log(`ScreenOrientation change: ${type}, ${angle} degrees.`);
});

実務での使いどころ

  • Screen orientation の活用

    Screen Orientation API の ScreenOrientation インターフェイスは、文書の現在の向きの情報を提供します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク