スマホサイト制作の際にメディアクエリを利用して縦横指定する方法と注意

レスポシブサイトを作成するときにCSS記述でスタイルを切り替えることができる便利なMedia Queries。
スマホを横に向けた場合だけにCSSを当てたい場合につまずきました。
解決したのでその方法と注意をメモします。
スタイルシートを一枚でレスポンシブサイトを制作する場合にはこのMedia Queriesの指定方法に気をつけましょう。

 

PC表示とスマホの両方で縦横記述が使える

ここが注意点です。一部のサイト様ではスマホを傾けた場合の記述方法として紹介していますがPCとスマホ両方に反映されてしまうMedia Queriesを紹介されていました。

以下がPCやスマホ等の全てのデバイスで縦横判定してくれるMedia Queriesの記述です。

PC/スマホの横向き指定

@media only screen and (orientation:landscape) {
/* style */
}

PC/スマホの縦向き指定

@media only screen and (orientation:portrait) {
/* style */
}

スマホの縦横判定のMedia Queries

スマホだけに縦横判定をさせたい場合はデバイス幅の指定が必要になります。
横向きであれば「max-device-width:480px」、縦向きであれば「min-device-width:320px」です。

スマホの横向き指定

@media only screen and (max-device-width:480px) and (orientation:landscape) {
/* style */
}

スマホの縦向き指定

@media only screen and (min-device-width:320px) and (orientation:portrait) {
/* style */
}

以上となります。

ユーザーエージェント判定などを導入してPCとスマホのスタイルシートを分けている場合にはこの記述は必要ないかもしれません。

個人的に一つのファイルで全デバイスに対応させることに最近ハマっているので気をつけたいと思います。