orientation
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
orientation は CSS のメディア特性で、ビューポート (またはページメディアではページボックス) の向きを調べるために使用することができます。
メモ: この特性は端末の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。
構文
orientation 特性は以下の一覧のうち一つのキーワード値で指定します。
キーワード値
例
縦長の向き
この例では、HTML に 3 つのボックスが存在し、orientation メディア特性を使用して、行のレイアウト（横向き）と列のレイアウト（縦向き）を切り替えています。
出力の例は、高さが幅よりも大きい <iframe> に埋め込まれているため、ボックスは列のレイアウトになります。
HTML
html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
CSS
css
body {
display: flex;
}
div {
background: yellow;
width: 200px;
height: 200px;
margin: 0.5rem;
padding: 0.5rem;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
結果
横長の向き
この例は、前回の例とまったく同じコードです。 HTML には 3 つのボックスがあり、orientation メディア機能を使用して、行レイアウト（横向き）と列のレイアウト（縦向き）を切り替えています。
ただし、この例では、出力例は、高さが幅よりも小さい <iframe> に埋め込まれているため、ボックスは 1 行のレイアウトになります。
HTML
html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
CSS
css
body {
display: flex;
}
div {
background: yellow;
width: 200px;
height: 200px;
margin: 0.5rem;
padding: 0.5rem;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
仕様書
| Specification |
|---|
| Media Queries Level 4 # orientation |
ブラウザーの互換性
Loading…