iOSやAndroidの向きに合わせてスタイルを変更する方法

スマートフォン（以下：スマホ）もメディアクエリでスタイルを変更できます。 Ardor(@ArdorOnline)です。 前回「ブラウザの幅に合わせてスタイルを変更する方法」で メディアクエリを利用してブラウザの幅に合わせたスタイルの指定を行いました。 同じことが、スマホでもできます！

メディアクエリ

前回同様、@media に続けてメディアタイプに「screen」を指定します。

@media screen { 設定 }

@media screen and ( 特性 ) { 設定 }

特性には、「orientation」を指定します。
指定できるのは、次の通りです。

• 縦長 → portrait
• 横長 → landscape

スタイルシートの記述

スマホの向きに合わせてスタイルを変更する記述例です。

@media screen and (orientation: portrait) {
 .media-sample {
  background-color: blue;
 }
}
@media screen and (orientation: landscape) {
 .media-sample {
  background-color: yellow;
 }
}

縦長の時にbule、横長の時にyellowになるように指定しました。

サンプル

スマホの向きを変更すると色が変わります。
また、ブラウザを縦長、横長にサイズを変更しても色が変わります。

SAMPLE

最後に

いかがでしたでしょうか？ 色が変わるのが確認できましたか？
縦長、横長でスタイルを変更するテクニックとして覚えておくと便利だと思います。

最後までお読み頂きありがとうございます。