モバイルデバイス（iPad、iPhone等）でサイトを観覧時に、右側に空白ができてしまう時の解決策。

レスポンシヴデザインを採用したサイトに多く見られるのですが、iPadやiPhone、または各社のスマートフォン等のモバイルデバイスでの観覧時に、ウィンドウの右側、あるいはコンテンツの右側に、意図していない余分な空白ができてしまうことがあります。

どちらかというとこれはサイト製作者の犯したミスではなく、ブラウザ（あるいはOS）側のエラーやバグであることがほとんどのようです。

解決するにはちょっとしたCSSのテクニックが必要になります。

iPhone、iPad等でサイト観覧時に、右側に余白ができる場合

このケースの場合、たいていは［body要素］に「min-width」を効かせれば解決します。
一例を挙げると以下のようになります。

body {
width:100%;
height:100%;
background: #fff;
color:#1a1a1a;
min-width:960px;
}

「min-width」で指定する値は、表示させたい領域の最大幅になります。
仮に <head> 〜 </head> 内で「<meta name="viewport" content="width=880">」などと記述している場合、この値と合わせると良いでしょう。

ちなみに他のいくつかの外部ブログにて、同様の問題に関して「［_display:inline;］や［_zoom:1;］を効かせましょう」といった類の記述を見かけましたが、これは意味がありませんのでご注意を。

これも、原因はOS側のバグが原因になります。

解決策は、任意の要素に「width」を指定すること、「background-color」を指定すること、「overflow:hidden;」を効かせること、「box-sizing」を使うことなどが挙げられます。

例えばコンテンツ全体を <div id="wrap">〜</div> で囲んでしまい、この要素に「width:100%;」と「overflow:hidden;」を効かせます。

#wrap {
width:100%;
overflow:hidden;
}

…これだけで問題が解決するケースも多いと思います。

また、これもAndroid端末でよく見かける現象なのですが、テキストの右側に謎の余白が現れてしまう場合は、その要素に「background-color」を指定してみましょう。
…なぜかこれで解決してしまうから不思議です。苦笑。

初心に戻って「viewport」の設定を見直してみましょう。

「viewport」で指定した値と、「body要素のmin-width」に差異はないか？
そもそも「viewport」の設定は最適化されているか？
内包しているコンテンツの横幅が、親要素のボックスからはみ出ていないか？

…などなど。

すべてのデバイスに最適化させるのはなかなか困難ですが、キモを覚えておけば、意図しないデザインの崩れにも迅速に対応することができます。
ぜひこの記事を参考にしてみてください。

新しい記事を公開しました。
こちらも参考になるのでどうぞ。

意図していない横スクロールの原因を一瞬で特定する方法