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