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

| コメント(3)

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

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

viewport設定なし、コンテンツ幅320px固定
iPhoneキャプチャ
viewport設定なし、コンテンツ幅100%
iPhoneキャプチャ
width=600
iPhoneキャプチャ
width=320
iPhoneキャプチャ
width=320,initial-scale=2.0
iPhoneキャプチャ
width=320,user-scalable=no
iPhoneキャプチャ
width=320,maximum-scale=3.0
iPhoneキャプチャ
iPhoneキャプチャ
width=480,maximum-scale=0.6667
iPhoneキャプチャ
iPhoneキャプチャ

一番最後の「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ファイルへのリンクを追加しました。

コメント(3)

初めまして!!!
参考にさせていただきiPhone用のサイトを制作しています。

一度横向きにして、縦向きにもどすと文字サイズが戻らない現象ではまっています。。。

色々検証していかないといけないっぽいんでこれからも色々と参考にさせていただきます!

>kazuさん
はじめまして!
「一度横向きにして、縦向きにもどすと文字サイズが戻らない現象」
たまにあるようですね。自分は・・・気付いていないだけかも。
これからもよろしくお願いします!

こんにちは。以前CSS Niteでお会いしたことがあるんですが、全然関係なく辿り着きましたw
この機能にまったく気づいてませんでした。。
大変参考になりました。ありがとうございます。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー