シンプルな暮らし。

CSSによるリキッド化

PC版で固定レイアウトになっている箇所をスマートフォン専用のCSSでリキッドに変更します。

iPhoneの場合は固定レイアウトでも問題ありませんが、Androidの場合は端末ごとに横幅が異なるという事情もあります。また、固定レイアウトでデザインされた画面をAndroidで縦持ちから横持ちに変更した場合、横幅が拡大(画面左右に余白が生じる)してしまいますので、基本的にはリキッドレイアウトが望ましいと思います。

固定レイアウトにしたい場合には、各種スマートフォンの横幅のうち最も多いと思われる320pxをターゲットとするのが良さそうです。PSDなどのデザイン制作時も320pxが良いですね。

ちなみにiPhone3GS、iPhone4共に解像度は320×480pxになります。iPhone4の場合、ディスプレイの解像度は640×960px(326dpi)ですが、Safari内の画面については320×480px(326dpi)に補正されます。画面横幅の考え方については、「スマートフォンサイトの作り方(6/8) - Viewportの設定」でまとめています。

HTML

<div id="wrapper">
 ここにコンテンツ。
</div>

PCの場合

#wrapper{
 width:800px;
}

スマートフォンの場合(横幅ぴったりにしたい場合)

#wrapper{
 width:100%;
 overflow-hidden;
}

スマートフォンの場合(左右に少し余白を設けたい場合)

#wrapper{
 width:96%;
 margin-left:2%;
 margin-right:2%;
 overflow-hidden;
}