【CSS】デバイスが縦長か横長かの状態によって Media Queries で振り分けが可能です。

Ads by Google

各種デバイスの横幅によって振り分けることが多い[Media Queries]ですが、デバイスが縦長か横長かの状態によってでも振り分けが可能です。

使用するのは「orientation」要素。
縦長の場合は「portrait」を。
横長の場合は「landscape」を指定します。
また、縦横が同じ長さの場合は「portrait」が適用されるようです。


デバイスが縦長の状態の場合

@media screen and (orientation: portrait) {
// ここに処理を書く
}

デバイスが横長の状態の場合

@media screen and (orientation: landscape) {
// ここに処理を書く
}

注意する点としては、スマートフォンやタブレットを含むすべてのデバイスに適応されること。
当然PC のディスプレイサイズにも依存します。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です