2011年7月8日金曜日

スマートフォン向けページに最適な meta viewport の指定で迷う

スマートフォンでページが見やすくなるように、metaタグでviewportを指定。

試行錯誤の結果、以下の書式に決定。
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

viewportの属性の内容は以下の通り。

・width
デフォルトの幅は 980、範囲は [200, 10,000]。
つまり、viewportが指定されていない場合は、デフォルトは幅980pxでページが表示されるので、表示コンテンツが小さくなり、見にくくなる。

・height
デフォルトの高さは、width と縦横比から計算され、範囲は [223, 10,000]。

・initial-scale
ページが最初に読み込まれるときの拡大率。デフォルトではページを画面に合わせる。指定可能範囲は [minimum-scale, maximum-scale]。

・minimum-scale
ユーザーが操作可能な拡大率の下限。デフォルトは 0.25 で指定可能範囲は [>0, 10]。

・maximum-scale
ユーザーが操作可能な拡大率の上限。デフォルトは 1.6 で指定可能範囲は [>0, 10]。

・user-scalable
ユーザーが拡大縮小(ピンチイン/ピンチアウト)できるかどうかをyesかnoで設定。デフォルトはyes。数値指定も可能。その場合yesが1、noが0。

参考:Travellers Tales : iPhone 用 Web ページおよびアプリケーションの作り方 - iPhone Development Guidelines を読む



つまり、今回のviewport指定では、
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
width=device-width; initial-scale=1.0;
ページの横幅を、ユーザーが使用しているスマートフォン画面の横幅と等倍になるようにし、

maximum-scale=1.0; user-scalable=0;
ユーザー操作による拡大縮小を禁止している。



今回作成したページでは、端末の画面幅に合わせて、画像を最適なサイズへリサイズする必要があった。

端末を回転させる前にユーザーがページを拡大させていたとする。端末を回転させると、回転させる前のズームレベルを継承しつつ、回転後の画面幅に合わせようとして、思ったとおりの画像サイズへリサイズされない。

よって、

maximum-scale=1.0; user-scalable=0;

の指定が必要だった。

参考:meta viewportがよくわからん - Takazudo hamalog


さらに、画像をリサイズする拡大縮小率は、端末のdpiを考慮しないと、正確な拡大縮小率にはならない。

例えば、端末のdpiを考慮しないと、docomo Galaxy TAB(SC-01C)縦では、ブラウザ幅は400pxとなる。Galaxy TABのdpiレベル 1.5 を考慮しないと、正確な解像度である幅600pxとはならないのだ。

dpiレベルを指定する属性を含めると、viewportは以下のようなタグになる。
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
参考:Targeting Screens from Web Apps | Android Developers


しかし、ここで問題が。

スマートフォン向けのAdSense広告をページ内に表示していると、dpiに合わせて広告が小さく表示され、アピール度に欠けてしまうのだ。

よって、target-densitydpiは指定せず、拡大縮小率を数値で表示させるのもやめることとした。

2 件のコメント :

  1. 貴重な情報ありがとうございます。

    一点、間違いかなぁと思ったので、ご連絡します。
    user-scalable=0と書かれている箇所がいくつかありますが、
    user-scalable=no ですよね。

    返信削除
  2. 1, 0の数値指定も可能なので、数値指定で例を書いています。
    でも、そのことをuser-scalableの内容で書いていなかったので分かりにくかったかもしれませんね。追記しておきました(^^)

    返信削除