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

Ads by Google

レスポンシヴデザインを採用したサイトに多く見られるのですが、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;]を効かせましょう」といった類の記述を見かけましたが、これは意味がありませんのでご注意を。

Android端末でサイト観覧時にテキストの右側に余白ができる場合

これも、原因は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」の設定は最適化されているか?
内包しているコンテンツの横幅が、親要素のボックスからはみ出ていないか?

…などなど。

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

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google