WEB DESIGN (B)LOG

ノンプログラマーなWebデザイナーによるWordpress、HTML5、スマートフォンサイト制作関連などWebサイト制作に関するブログ

iPhone・iPad 縦向きと横向きでCSSを切り替える

:iPhone•iPad•スマートフォン

iPhone・iPad向けにデザイン・コーディングする場合、
デザインを考慮したりリキッドレイアウトで対応しなくても、
iPhone・iPadなどを縦向きにした場合、横向きにした場合で、
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">


pagetop