[CSS]スタイルシートでスマホの縦横切替に対応する

Webアプリを作っていると、スマホの縦横切替時にCSSの設定を変えたい場合などがあると思います。

縦横切替時(実際には縦長、横長)の切り替わりの時にCSSの設定値を自動的に切り替える方法をご紹介します。

記述方法はとても簡単です。

例えば、CSSファイルに以下のように書くだけで、縦長の場合と横長の場合でフォントサイズを切り替えることができます。

/* 横長の場合 */
@media only screen and (orientation : landscape) {
    body { font-size:12pt; }
}
/* 縦長の場合 */
@media only screen and (orientation : portrait) {
    body { font-size:14pt; }
}

本当に簡単ですね。