iOSで背景画像が縮小表示されてしまう時の対処法

スマートフォンやタブレットは、Webサイトを閲覧するにあたってとても便利で普及が進んでますね。
実際自分もiPadでWebサイトの閲覧をよくしてますが、PCとほぼ遜色がなく、しかも手軽に使えるのでますます多くの人に使われそうですね。
ともなればWeb制作者視点から見ればそういう人達への対応が必要なわけで…w
もう時代遅れでオワコンのIE6対策よりはこっちの対策を考えたほうがいい気がしますw
専用デザインでなくても、せめて見苦しくはならないようデザインを考えていきたいところですが…
ただ自分の私物ではiOS端末しかなく、Android端末で動作確認ができないので、Androidでどう見えてるかは割りと心配です(汗

ところで、iOSは結構Web標準に準拠していて、HTMLやCSSはもちろん、javascriptもPC版のSafariに遜色無くちゃんと動いてくれて嬉しいことが多いのですが、ときどきなんでこうなったんだ?って思いたくなるような仕様にぶち当たることもあります…
今回もそれにぶち当たってしまいましたorz

サイトの背景描きあがった!と思ってiPadでどう見えるかなと気分揚々で見てみたところ、

こんな感じに、背景画像だけが全体表示されてしまいました…見苦しい…
なんとかして他のコンテンツと同じ倍率で表示させて欲しい、と調べたところ、こんな記事がありました。

iPhoneのSafariブラウザにおける、色んな制限

ここには
「GIF、PNG、TIFF画像のデコードサイズ制限は2メガピクセル。つまり、width × height ≤ 2 × 1024 × 1024 でなければいけません。」と書いてありました。
画像の大きさを確認すると、1800×1200で確かにオーバーしてしまいましたorz
自分の場合はJPEGだけど、同じ理由なのかもしれないと試してみます。
でも僅かなオーバーだから少し削るだけで良かったとひと安心w

えーっと、横を削らなかったら縦は何pxにすればいいんだろう…と、幸いにも下の方に削っても差し支えのない黒の余白があったので、そこを削って1138pxにしました(きわどい

2 × 1024 × 1024 > 1138 × 1800 ということでOKになるかなと緊張の面持ちで確認してみると…

無事ちゃんと表示されました!
これでめでたしめでたし..

コメントを残す

メールアドレスが公開されることはありません。