最近、iPhoneやandroidなどのスマホ対応をしたサイトが増えてきました。
弊社でもスマホサイトを作っているのですが、PCサイトとはまた違った点に注意しないといけませんね。
特にスマホを横にした時は横幅が広がるので、それに対応するため「リキッドレイアウト」で制作しないといけません。
具体的には
- 背景は横方向に繰り返し表示されるようにする
- 画像は中央揃えにする
- （場合によりますが）横幅の指定はpxではなく％にする
といった所でしょうか。（私自身まだ勉強中です
）
また、スマホサイトでは文字サイズが自動調整されてしまうのですが、以下のように指定すれば自動調整をオフにできます。
body {
-webkit-text-size-adjust: none;
}
まだまだPCサイトと違う点がたくさんあるのですが、それはまた次の機会に書きたいと思います。
