カテゴリー別アーカイブ: iOS

iOS safariで画像の横幅を取得する方法。

windows7のChromeも同じでしたが、
imgタグのonload完了後にwidth or heightにアクセスしないと「0」が返ってきます。

これで2,3時間は浪費した上にとんでもなく疲れました。。。
しかもこの問題は以前出会った気がするし。。。
久々にjavascriptとかmobile safariとか弄ったらこの有り様なのでトラウマになりそうです。
iOS6出た直後にこんな程度のレベルのブログ書いてるようでは、 生きてる内にIT長者にはなれそうもありません。。。
凡人はコツコツやるしか無いっすねー。

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無しだと画像がピンぼけしたので辞めました。)

まぁそういう事です。

参考