viewportの表示を検証してみました

昨日のエントリーで、iPhone / iPod touch向けのHTML作成におけるmeta要素の「viewport」について書きました。

ただ、文字だけじゃわかりづらいので、「viewport」について簡単にHTMLを作成しました。そしてiPhone端末でキャプチャをとりましたので、それらをまとめてみました。

viewport設定なし、コンテンツ幅320px固定

viewport設定なし、コンテンツ幅100%

width=600

width=320

width=320,initial-scale=2.0

width=320,user-scalable=no

width=320,maximum-scale=3.0

width=480,maximum-scale=0.6667

一番最後の「width=480,maximum-scale=0.6667」というviewportの記述は"Holy Grail"と呼ばれ、iPhone端末を縦向き（portlateモード）にしても横向き（landscapeモード）にしても、文字サイズが変わらないという指定方法です。
ただし、「maximum-scale=0.6667」と記載しているので、「user-scalable=no」と指定していなくても、指で拡大（pinch in ／ pinch out）しようとしても、元のサイズに戻ってしまい拡大表示することができません。

一方「width=320」というviewportの記述だと、「user-scalable=no」と指定しなければユーザーは指で拡大表示することができますが、横向きにした場合、文字サイズが縦向きに比べ若干大きくなります。

個人的には、縦向き・横向きにした際、文字サイズが変わることは今のところそこまで気になりません。サンプルで作成したページがテキストベースだからかもしれませんが、ユーザーが拡大できた方がユーザービリティー的にもいいと思います。
ただし、コンテンツによっては文字サイズが変わってしまうことで使いにくくなることもあると思うので、そこらへんは都度判断した方がいいかもしれませんね。

※サンプルページは私が会社で突貫で作ったもので、社内レギュレーションにあわせてHTML4.01Transitionalで作成しています。間違い等ありましたら、ご指摘いただければと思います。

※2008年7月30日、HTMLファイルへのリンクを追加しました。