2008年7月21日
iPhone / iPod touch 向けのmeta要素 viewport
iPhone / iPod touch（以降、iPhoneと表記させていただきます）のスクリーンサイズは320x480ピクセルです（Safariのアドレスバーなどを除いた表示領域は320x356ピクセル）。
かといって、iPhone向けにHTMLを作成する場合、コンテンツの横幅（width）を320ピクセルに固定してしまうだけだと、かなり小さく表示されてしまいます。
これはiPhone用のSafariがページを表示する際に、デフォルトで縮小表示をするからです。横幅980ピクセルまで縮小されます。iPhone端末を縦向き（portlateモード）にしても、横向き（landscapeモード）にしても、横幅980ピクセルです。
しかし、この状態のままでは文字サイズが小さく、1回1回拡大しなければいけません。iPhone向けにページを作成する場合は、meta要素のname属性「viewport」で最適化することにより、iPhone向けにきれいに表示されるようになります。
viewportは、以下のように記述します。viewportの値（正確にはcontent属性の値）は、セミコロンでなくカンマで区切るのが正しいようです。参考[1]
<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, ">
viewportの値については、以下にまとめました。参考[2]
- width , height
- 最初に読み込まれた際の表示サイズ。widthの場合、何も指定しないと横幅980ピクセルになります。
- initial-scale
- 最初に読み込まれた際の拡大率
- user-scalable
- ユーザーが拡大（pinch in ／ pinch out）できるか否かを、yesかnoで設定
- maximum-scale
- ユーザーが操作可能な拡大率の上限
- minimum-scale
- ユーザーが操作可能な拡大率の下限
viewportのwidthを320ピクセルにしてみると、次のように表示されます。
<meta name="viewport" content="width=320">
また、initial-scaleを2.0にすると、最初に読み込まれた際に2倍の大きさで表示されます。
<meta name="viewport" content="width=320, initial-scale=2.0">
で、結局のところどのようにviewportの値を記述したらいいかは、今週中にまたエントリーしたいと思います。「viewportの表示を検証してみました」というエントリーにまとめてみました。
※サンプルページは私が会社で突貫で作ったもので、社内レギュレーションにあわせてHTML4.01Transitionalで作成しています。間違い等ありましたら、ご指摘いただければと思います。
