iphoneでHTML + JPGを表示させる時のポイント。

この「initial-scale=1.0」というのを指定しておくと、
桁違いに挙動を操作しやすくなるということを学びました。
お試しあれ。

参考事例。

どういうケースを想定しているかというと、
(横幅)1050px * (高さ)2000pxの画像と、
(横幅)1300px * (高さ)1050pxの画像

を表示させる時を想定しています。
bodyタグの中身はdivとimgタグがそれぞれ一個あるだけです。
それぞれの画像を表示してみるとわかるんですが、

初期表示時に、
(横幅)1050pxは横スクロールは出ない。
(横幅)1300pxは横スクロールは出る。
この場合は綺麗に表示させたいので、
(横幅)1050pxの場合はそのままでOKですが、
(横幅)1300pxの方は、横幅ピッタリ + センター寄せで表示させるためにあーでもないこーでもない、
とやることになるんですね。

結局のところ、
html or css or viewportで操作するのを諦めて、
画像のサイズ自体をそれぞれのデバイスに合わせるのが、一番フレキシブルでないですかと。
(cssのbackground-sizeプロパティというのも試したんですが、initial-scale=1.0無しだと画像がピンぼけしたので辞めました。)

まぁそういう事です。

参考

コメントを残す

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

CAPTCHA