seno.ccWebデザイナーと2匹のハリネズミ

seno.cc > 日記 > iPhone(スマホ)で背景が途中で切れてしまう時のCSS対処法

iPhone(スマホ)で背景が途中で切れてしまう時のCSS対処法

2012
02/11
Share Button

この記事は【転載】iPhone(スマホ)で背景が途中で切れてしまう時のCSS対処法に転載しています。今後、技術系のブログはリンク先ブログで更新していく予定なので、そちらもよろしくお願いいたします!

PC用ホームページ制作中にiPhoneで「背景が横幅MAXで表示されない」という状況に陥りました。

これまでにも自分で制作したPC用のホームページをiPhoneで見る事はありましたが、
初めてぶつかった問題だったので備忘録としてCSSでの解決方法を残しておきます。

原因

iphoneでは、どんなホームページを見ても同じ横幅で表示されますよね。
調べてみたところ、今回の問題はそこに原因がありました。

iPhone用のSafariは、Viewport(PCでいうウィンドウサイズ)という概念を持っていて、
デフォルトで980pxに設定がされています。
980px以上のPCサイトであっても、iPhoneで見たときには自動で横幅980pxに表示してくれます。
が、ここで気をつけなければいけないのは、width指定なしで背景を設定している場合です。

分かりやすく言うとヘッダー部分など、ホームページの横幅全体に伸びる背景がそれにあたります。
width指定がされている、または指定の影響範囲の中にあるコンテンツは、きちんと自動縮尺してくれるのですが、
Viewportの影響で、width指定がない部分だけがデフォルト980pxと判断され、コンテンツが縮尺される際に2重縮尺となってしまう訳です。

解決法

前置きが長くなりましたが、解決法はいたって簡単。
ようは、件の背景部分にwidth指定をしてしまえば良いので該当部分に、
ホームページ上で使われている最も大きな幅数値を「min-width」 としてかきくわえるだけでオーケーです。

以下のようにbodyに指定すると楽ですね。

例:ホームページで使われてる最も大きな幅指定が1086pxだった場合

body
{
        min-width:1086px; 
}

他にも解決法はあるみたいですが、CSSに1行書き加えるだけで比較的な簡単なので試してみてください。