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 ; } |
コメントが承認されるまで時間がかかります。