リキッドデザインなどを作る際によく用いられる「width:100%」ですが、スマートフォンサイトで使う時は注意が必要です。
よく、ヘッダーなりフッターなりに背景色を横幅いっぱいにつけたい時、CSSで「width: 100%;」と指定しますが、実際に確認すると、途中で切れている場合が多々あります。
これは、viewportに「width=device-width」を設定しているためで、viewport に「width=device-width」を設定していると[ body の横幅 ] = [スマートフォンの画面の横幅(例えばiPhone5なら320px)]と解釈されてしまうので、headerなりfooterの横幅も320px相当になってしまうため、背景色や背景画像が表示される領域も320pxになってしまうわけです。
解決方法は実際に表示させたい横幅の値を「min-width」で指定してあげれば大丈夫です。例えばcontainerに960pxを指定していれば、「min-width:960px;」とすればOKです。
body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height:1.5; background-color:#f5f5f5; min-width: 960px; } #container { width:960px; margin:0 auto; overflow:hidden; background-color:#FFF; }