Dropbox

iPhone / iPod touchのSafariでは普通のアプリ顔負けな複雑なWebアプリを実行できる仕組みを持っていますが、そういった難しい話ではありません。

単純なテキスト情報をiPhoneのSafariに表示しようと思いました。普通のHTML文書を表示させようとすると、随分と小さな文字で表示されてしまいます。これはPC向けのレイアウトを効率よく表示し必要に応じて拡大しようというモードになっているためです。iPhone専用サイトでは、おまじないを唱えることによりiPhone向けのレイアウトであることを示しています。

ということで、いきなり正解を示します。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=3.0; user-scalable=1;" >

これをヘッダーの最初に挿入すればOKです。適当に読みやすい文字の大きさで表示されます。ただし<H1>などは、そのままでは文字が大きくなりすぎますので考慮が必要です。

この設定ではピンチにより三倍まで拡大表示出来ます(縮小は無し)。また、実際のiPhone向けサイトを調べてみるとwidth=320となっているところが多いようですがdevice-widthとした方が柔軟で良いようです。

Trackback

no comment untill now

Add your comment now