【iPhone・iPad】縦向きと横向きでCSSを分けて読み込む

iPhone・iPadなどを縦向き、横向きにした場合でレイアウトを替えたい場合、
一つのCSSで縦横の変化に合わせたものにせず、
CSSを分けて読み込むことが可能です。

portlait ポートレート（縦向き）用のCSS

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

landscape ランドスケープ（横向き）用のCSS

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

デザイン上同じCSSを使うのが難しい場合などにかなり便利です。

Tweet