レスポンシブデザインで右側に謎の空白ができたときの解決策

Jul 15, 2014

oveflowが助けてくれました

この前、レスポンシブデザインを制作していたら突然というか気づかないうちに右側に結構な幅の空白が空いていました。あれ?おかしいなおかしいなと思ったので、そのときの解決策を試行錯誤も踏まえ載せてみます。

背景

今回のレスポンシブデザインはウィンドウサイズを縮めていったらそのまま全体的にしゅるしゅると縮小していくものだったのでwidthは基本的には%で設定しています。

気がついた時には空白はそこにいた。

とりあえず、一通り作り終え、スマートフォンで確認したときです。
あれ?斜めに動く。。。

まじすか。え、でもPCだと大j…空白あるわ。

うおーーい!(テストアップ3時間前)←ここから最終調整やなんやするのに。。。

解決策

viewportの設定

恥ずかしながらviewport設定するのを忘れてました。なんやなんや、原因これか。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

これで解決!…と思いきやまだ空白残っております。なぬっ!?

overflowの設定

時間もなくなってきたときに出てきた記事。wrapperoverflow: hidden;かけたら直ったよーとのこと。
直感でこれはいけるなと確信。
記事を見てから5秒後にコードを書き換え、更新!

できた。

参考サイト:
レスポンシブ・デザインをしてみたまとめ

まとめ

結果、このレスポンシブのサイトではwrapperoverflow: hidden;をかけたら直りました。(もちろんviewportは設定した上の話です。)overflow: hidden;しなくてもレスポンシブがでているサイトがある中、この対応は納得できないがまずはよしとしよう。