iPhone / iPod touch 向けのmeta要素 viewport

| トラックバック(1)

iPhone / iPod touch(以降、iPhoneと表記させていただきます)のスクリーンサイズは320x480ピクセルです(Safariのアドレスバーなどを除いた表示領域は320x356ピクセル)。
かといって、iPhone向けにHTMLを作成する場合、コンテンツの横幅(width)を320ピクセルに固定してしまうだけだと、かなり小さく表示されてしまいます。

iPhoneキャプチャ

これは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">

iPhoneキャプチャ

また、initial-scaleを2.0にすると、最初に読み込まれた際に2倍の大きさで表示されます。

<meta name="viewport" content="width=320, initial-scale=2.0">

iPhoneキャプチャ

で、結局のところどのようにviewportの値を記述したらいいかは、今週中にまたエントリーしたいと思います。viewportの表示を検証してみました」というエントリーにまとめてみました。

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

参考サイト

トラックバック(1)

そして、はまった。 表示、コンタクトフォームからのメール送信。文字化け。 この辺のことは問題なかったんですけど、iPhoneを傾けたときに一部の文字が拡大... 続きを読む

プロフィール

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

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

最新のエントリー