スマホで見ると「あれっ？右側だけ少し余白が…」という時の対処法

レスポンシブじゃないサイトを作成している時…

PCではちゃんと横幅一杯に広がっているのに、スマホで見ると「あれっ？右側だけ少し余白が…」という時の対処方法。

① 親div に「 min-width: ◯◯px; 」を指定。

※○○部分は、例）900pxの幅で表示したい時→900px

http://ameblo.jp/trapshooter/entry-11712741729.html

に書かれている投稿によると、この現象は、

「外側のdiv に100%指定して、その子（内側）div にpx指定していると発生」

するようです。

② メタタグの viewport 設定で解決

http://miz2403.com/viewport-settei/

head内に下記の一行をいれると解決しました。

<meta content="width=900" name="viewport">