Travellers Tales

Safari on iPhone/iPod touch に導入された meta 要素の viewport 属性ですが、使ったことがない人にはなかなか理解しづらいようなので、ちょっと補足しておきます。こんな突っ込みもあったので。

リキッドにしとけばいいだけの話とちゃうの？

いや、違うんですよ。

前回、viewport は仮想的なウインドウということを説明しましたが、この仮想ウインドウは、閲覧しているユーザによって大きさを変更できない、サイズ固定のウインドウなわけです。

そして、Safari on iPhone/iPod touch は、基本的にこの仮想ウインドウの（横幅）全体が、横幅 320px（縦持ち時）のディスプレイに納まるように、縮小（もしくは拡大）して表示しようとします。

viewport のデフォルト設定は 980px。980px を 320px 液晶に納めるために約 1/3 に縮小されて表示されます。よっぽどフォントサイズを大きく設定していない限り、拡大しないと読むのはつらい大きさです。

ウインドウサイズ固定なので、リキッドレイアウトであるかないかは、この点においてはあまり関係ないでしょう。リキッドレイアウトのメリットは、どんなウインドウ幅でも柔軟に表示できることですが、viewport を設定しない限り、リキッドであろうがなかろうが、Safari on iPhone/iPod touch は 980px 幅のウインドウでブラウズした状態でページを表示します。ということは、結局、約 1/3 に縮小して表示されてしまいます。ウインドウ幅固定なのでリキッドレイアウトの利点が活かせません。

viewport を自ら設定する際は、リキッドレイアウトの利点が活きてくると思います。一方、固定幅のレイアウトのサイトで、その幅が 900px のようなデフォルトの 980px とあまり変わらない値なら、viewport を width=900px に設定したところで、Safari on iPhone/iPod touch での表示はほとんど変わらず小さいまま（320/900 = 約 1/3）です。

リキッドレイアウト等を用いており、サイト幅が柔軟に変更できるなら、例えば viewport を width=640px と設定すれば、縮小率を 1/2 程度に抑えられます。このくらいだと拡大せずに十分文字の読める大きさです。 width=320px にしても破綻を来さないデザインなら、等倍で表示させることもできます。

具体的な viewport の設定方法は前回の記事をご参照ください。

おまけ：viewport を設定した人たちの喜びの声が！

インチキ通販にありそうな見出しですが、リファラより。

やってみた。一行足すだけで大きな変化。すばらしい。

早速対応した。初期画面が初めから大きめに表示されるのでこれは便利だ。

これで左右の余白部分がなくなったので、少し文字が大きく表示されてみやすくなりました。

それにしても、最近 iPhone/iPod touch のウェブ開発関連のネタばかり書いていたら、予期せず iPhone/iPod touch を研究してるブログとか言われてました。研究してたつもりじゃなかったんですが。

そうすると、iPod touchで見たときに左右に余白が出来て、小さめに表示されていたものが、こんな感じにサイトの横幅いっぱいに少し拡大されて表示されて、見やすくなりました。iPod touch用「skyseeker.net」が出来たみたいで、とてもうれしいです。

追記：まだ誤解が？

簡単にいえばサイトの横幅を指定することにより、iPod touchで見たときに横幅ぴったりに表示される模様。

えーと、まだ誤解があるような。Safari on iPhone/iPod touch は常に横幅ぴったりに表示します。適切な viewport を設定してやることで、文字の縮小率をコントロールでき、わざわざピンチ動作で表示を拡大しなくても、ウェブページが読める、ということになります。