CSS の orientation 記述子は、 @viewport で定義された文書の方向を制御します。

/* キーワード値 */
orientation: auto;
orientation: portrait;
orientation: landscape;

機器をを傾けることで方向が変更される UA や機器の場合、この記述子を使用して方向の変更を禁止することができます。

関連する @規則@viewport
初期値auto
パーセンテージbounding box のサイズ
メディア一括指定の各プロパティとして
  • visual: DB に値が見つかりません!
  • continuous: DB に値が見つかりません!
計算値指定値
正規順序形式文法で定義される一意のあいまいでない順序

構文

auto
ユーザーエージェントは文書の向きを、通常は加速度計 (機器にそのようなハードウェアセンサーがある場合) によって特定された機器の方向に基づいて自動的に設定しますが、ユーザーによる制御もあり、加速度計を読むことを止めることで、 OS レベルの「方向のロック」設定でユーザーが制御することもよくあります。
portrait
文書は縦長の方向にロックされます。
landscape
文書は横長の方向にロックされます。

形式文法

auto | portrait | landscape

仕様書

仕様書 状態 備考
CSS Device Adaptation
"orientation" descriptor の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 未対応 なしEdge ? Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 未対応 なしSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android 完全対応 8
接頭辞付き
完全対応 8
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS ? Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

ドキュメントのタグと貢献者

このページの貢献者: ExE-Boss, mfuji09
最終更新者: ExE-Boss,