iPhoneデフォルトのビューポート

HTTPリクエストに対して画像を返すだけの簡単なサービスがあり、iPhone で見ると画像が小さく表示されてしまう、といわれて調査。
確認してみると、返す画像サイズは問題ないはずなのに、スクリーン上では左上に小さく表示されており、タッチすると正常なサイズで表示される。

調べてみると、iPhone 上 Safari のデフォルトビューポートの仕様が原因だと判明。
そのものずばりの現象が、公式サイトで説明されていた。

Safari Reference Library : Safari on iPhone OS Viewport

これによると、デフォルトでは横幅を 980 ピクセルで表示させる。
そのため、画像の横幅が490ピクセルだと、画面の半分のサイズで表示されてしまう。

文章としては、次のようにコンパクトにまとめられている。

For Safari on iPhone OS, the viewport is the area that determines how content is laid out and where text wraps on the webpage. The viewport can be larger or smaller than the visible area.

You can set the viewport size and other properties of your webpage.

“Using the Viewport Meta Tag” の説明にあるように、METAタグを利用すればデフォルトの横幅とスケールが変更可能。
今回は、

  • iPhone がメインターゲットではないこと
  • HTML ページではないため、META タグを追加出来ないこと

等々だだをこねて、改修は見送らせてもらった。

なお、Blackbaud が提供するエミュレーター(Safari 4 向け iBBDemo4) では現象が再現しなかった。

Advertisements
Tagged with: , , , ,
Posted in mobile

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Archives
%d bloggers like this: