Screen.orientation

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

orientationScreen インターフェイスの読み取り専用プロパティで、現在の画面の向きを返します。

構文

var orientation = window.screen.orientation;

返値

画面の向きを表す ScreenOrientation のインスタンスです。

なお、古い接頭辞付きのものは DOMStringScreenOrientation.type と同等のものを返していました。

var orientation = screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type;

if (orientation === "landscape-primary") {
  console.log("良い感じですね。");
} else if (orientation === "landscape-secondary") {
  console.log("うーん…。画面が上下逆です!");
} else if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
  console.log("うーん…。スクリーンを横向きにした方がいいですよ");
} else if (orientation === undefined) {
  console.log("このブラウザーは orientation API に対応していません :("); 
}

仕様書

仕様書 状態 備考
Screen Orientation API
orientation の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
orientationChrome 完全対応 38Edge 完全対応 12
接頭辞付き 補足
完全対応 12
接頭辞付き 補足
接頭辞付き ms のベンダー接頭辞が必要
補足 Edge does not return an Orientation object; instead, it returns the orientation type as a string.
Firefox 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 完全対応 11
接頭辞付き 補足
完全対応 11
接頭辞付き 補足
接頭辞付き ms のベンダー接頭辞が必要
補足 Not supported on Windows 7.
Opera 完全対応 25Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 39Firefox Android 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報