ページ

2008年8月19日

viewportって何だ? その2


このあたりをベースに。iPhoneの画面サイズはこの画像のような構成になっているらしい。で,横の画像のvisible areaの領域がviewportです。普通のブラウザだと,スクロールバーとかでviewportの領域は小さくなりますが,iPhoneは固定です。

普通のWebページをレンダリングするときは,横幅を980pxとしてレンダリングして,画面サイズに合うように縮小します。横幅を決めないとレンダリングしようがないので,まあ,妥当な実装だとは思います。でも,980pxって言うのはどういう根拠なんでしょう?このサイズはちょっと納得できません。

viewportを指定することで,横幅などをそのサイズでレンダリングします。320pxとか480px(横にしたとき)にすると,縮小されずにきれいに表示さます。拡大,縮小はscaleを指定すれば,制御可能です。

viewportの指定の仕方は,「WebページのiPhone対応について調べてみる その2」「iPhone/touch向けのmeta要素viewport」に。まあ,幅と高さ,拡大倍率が指定できます。また,倍率はユーザが変更可能かどうかも制御できます。

基本的には,横幅は980pxより大きいWebページはMobileSafariが頑張ってかっこ良く見えるようにレンダリングしてくれます。980pxより小さい場合は,左右に余白が出来ちゃいます。そのため,980pxより狭い場合は,viewportを指定せよ!高さを固定したい場合もviewportを指定せよ!必要であれば倍率も制御できるので心の片隅に止めておけ。と言うことでいいのかな?


0 件のコメント: