CSS Sprites 縦横の画像領域上限

CSS Sprites 化したサイトをiPhoneやiPadで確認するとえらいことになっていた。

CSS Sprite は反映されず、1枚にした画像がそのまま画面サイズに合わせて表示されている感じ。
google先生に聞いてみましたがそれらしき情報がなかったのでメモ。

どうやら画像領域に上限があるようで、いろいろ試してみました。
結果、横幅が何ピクセル、縦幅何ピクセルといったかんじではなく面積なのでしょうか。

○ 1100×1700
○ 977×1833
○ 272×5830

縦横どちらも長すぎるときちんと表示されません。
結局詳しい数値までは分かりませんでしたが、あまり大きい画像領域だと表示に不具合がでる恐れがあるので、複数に分割し、必要に応じて最小限を読み込むようにした方が良さそうです。

分割後はiPhoneやiPad共に問題無く表示されるようになりました。

上限についてご存知の方がいらっしゃいましたらご教授お願いします。<(_ _)>


SNSでもご購読できます。

コメントを残す