スマートフォン向けページに最適な 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は指定せず、拡大縮小率を数値で表示させるのもやめることとした。