謎の右余白に苦しむ・・・

レスポンシブでサイト作成した際、できたー!と思ってiphoneでサイトを確認していると、あれれ??画面右端に10pxくらいの謎の余白が!
iphone_tips01
くすん、なんでだー!と思って色々ググった結果のチェックポイントと対策を3つ。

1. viewportの確認

もしかしたら記述し忘れているのかも?と思って確認してみる。



と入っているので問題ないかなぁ。

2. bodyの幅指定の確認

bodyの中の要素がbody幅からはみだしているのかも?と思って確認してみる。
そもそもbodyは100%表示なんだけど・・・念のため各要素の幅を確認。・・・特に問題点見つからず。
ちなみに、body幅100%で、body背景に画像をrepeatで指定している場合、bodyにmin-width(固定ピクセル値)を指定すると解決することがあるそう。
でも、今回はbodyに背景画像は指定していないし、固定ピクセル値も使ってないので・・・。

3. 全体をwrapしてoverflow:hidden;

bodyの中身をまるっとwrapして.wrapにoverflow: hidden;を指定する。



ここにコンテンツ

.wrap{
overflow:hidden;
}

今回はこれで解決しました。
これでダメなら打つ手なし!