orientation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

orientationCSSメディア特性で、ビューポート (またはページ付きメディアではページボックス) の向きを調べるために使用することができます。

メモ: この特性は端末の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。

構文

orientation 特性は以下の一覧のうち一つのキーワード値で指定します。

キーワード値

portrait

ビューポートは縦長です。つまり、高さが幅よりも大きいか等しい状態です。

landscape

ビューポートは横長です。つまり、幅が高さよりも大きい状態です。

HTML

html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS

css
body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

結果

仕様書

Specification
Media Queries Level 4
# orientation

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
orientation media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support