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
  • RT @__apf__: How to write a research paper: a guide for software engineers & practitioners. docs.google.com/presentation/d… /cc @inwyrd 4 months ago
  • RT @HayatoChiba: 昔、自然と対話しながら数学に打ち込んだら何かを悟れるのではと思いたち、専門書1つだけ持ってパワースポットで名高い奈良の山奥に1週間籠ったことがある。しかし泊まった民宿にドカベンが全巻揃っていたため、水島新司と対話しただけで1週間過ぎた。 それ… 4 months ago
  • RT @googlecloud: Ever wonder what underwater fiber optic internet cables look like? Look no further than this deep dive w/ @NatAndLo: https… 4 months ago
  • @ijin UTC+01:00 な時間帯で生活しています、、、 10 months ago
  • RT @mattcutts: Google's world-class Site Reliability Engineering team wrote a new book: amazon.com/Site-Reliabili… It's about managing produc… 1 year ago
%d bloggers like this: