iOSのSafariで背景が縮小表示される

PCサイトをコーディング後、iOS6のSafariで表示を確認していたら背景が縮小して表示される現象に遭遇。

原因

現象が発生したソース。

HTML

1
2
3
<div id="contents">
    ~コンテンツ内容~
</div>

CSS

1
2
3
4
5
#contents {
    width: 990px;
    margin: 0 auto;
    background: url("bg.jpg") center top no-repeat;
}

調べてみると、iOSのSafariでは画像サイズが大きすぎると縮小して表示されてしまう模様。
画像の縦×横が2,000,000ピクセルを超えるとだめみたいです。
bg.jpgが990×2600で2,574,000ピクセルなので、2,000,000ピクセルを大幅にオーバーしてました。
 

対応方法

背景を指定していたdivを入れ子にして、背景を2つに分割することでとりあえず回避。
bg.jpgを990×1300 bg2.jpgを990×1300に変更しました。

HTML

1
2
3
4
5
<div id="contents">
    <div id="contents-inner">
        ~コンテンツ内容~
    </div>
</div>

CSS

1
2
3
4
5
6
7
8
9
#contents {
    width: 990px;
    margin: 0 auto;
    background: url("bg.jpg") center top no-repeat;
}
#contents-inner {
    width: 100%;
    background: url("bg2.jpg") center 1300px no-repeat;
}

参考サイト

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2025年3月
 1
2345678
9101112131415
16171819202122
23242526272829
3031