iOS safari:viewport(1)

webデザイニングの2011.11月号にはスマートフォン向けの記事もあったので、それも
まとめておこうと思います。とはいっても私はスマートフォンを持っていないので
iPodTouchで検証してみました。そのうちAndroidケータイも購入して検証できるように
しようと思います。
 

Normalize.cssについて

viewportの設定の前に、シンプルなスマートフォン用のページを作成しました。
そこで前回紹介したNormalize.cssを利用してみたのですが、ulとかに40pxの
paddingとか設定してあったりと(私的に)余分なものも多い印象を受けました。
 
ということで、いきなり前言撤回…利用するのをやめました…。
色々検証しながら自作していこうと思います。
現時点でのスマートフォン用のreset.cssはこちら
 
 
 

viewportって?

ではviewportの説明に入ります。まずはviewportの設定をしていないページが
どのように表示されるかを確認しておきましょう。
viewportの設定をしていないサンプルです
 
これをiPodTouchで表示すると以下の様になります(クリックで実物表示)。
 

あ 

iPodTouchの解像度は960*640ですが、上記のように横幅が960より少し大きく表示
されました(背景画像に目盛を薄く入れてあります)。このサンプルは幅を固定
していないので、より深く検証するためサイズを指定したサンプルも用意しました。
幅を固定したサンプル
 
これをiPodTouchで表示すると以下の様になります(クリックで実物表示)。
 

上記の通り、表示される領域はコンテンツの幅には関係なく一定であることが
確認できました。
スマートフォン用のブラウザで表示される領域はviewportと呼ばれデフォルトで
980pxとなっているそうです(これはPCサイトを横スクロール無しで表示できるように
するための配慮だそうです)。

しかし、これでは文字が小さくて拡大しないと内容が分かりません。ですので、
スマートフォン用のサイトではviewportを指定して閲覧しやすくします。
 
 
 

viewportの設定

デフォルトで980pxになっているviewportの幅を320pxに設定したいと思います。
viewportの設定はメタタグで以下の様に行います。

<meta name="viewport" content="width=320">

 
viewportで幅を320にしたサンプル
これをiPodTouchで表示すると以下の様になります(クリックで実物表示)。
 

viewportを設定すると上記の通り、表示幅が320pxで表示されるようになります。
このサンプルは幅を固定していないので、ちょうど良く表示されていますが
固定幅でデザインしたサイトで幅がviewportに納まらない場合は横スクロールが
生じます。しかしiPodTouchではスクロールバーがないため、横スクロールに
気が付かない危険性があるため、幅は固定幅にしない方が無難だとおもいます。
viewportで幅を320にした状態で幅500px以上のレイアウトをしたサンプル
 
上記のページをiPodTouchで表示し、横縦を切り替えていると表示倍率が変わって
バグのようになりますが、これは次回利用するinitial-scaleやmaximum-scaleを設定する
と直りますが、向きを変えるたびにセンタリング表示されるため、やはりviewport以上
の幅でデザインするのは避けるべきだとおもいます。
viewportで表示倍率を固定したサンプル
 
 
 

device-width

viewportのwidthには、利用機種の横幅に合わせるという設定が可能です。この場合
以下の様にwidthにdevice-widthを設定します。

<meta name="viewport" content="width=device-width">

 
viewportの幅にdevice-widthを利用したサンプル
これをiPodTouchで表示すると以下の様になります(クリックで実物表示)。
 

 
上記のようにdevice-widthを設定しても320pxの幅にしかなりません。しかし利用している
iPod Touchはretinaディスプレイなので画面解像度は640*960あります。
設定を間違えたのかなぁ?と色々確認したのですが、retinaディスプレイでも320*480として
扱われるそうです(そうすることで昔のディスプレイとの互換性を保つそうです)。
参考サイト
 
まだAndroidケータイを購入していないので確認できませんが、色々な機種で
汎用的に表示するのにはdevice-widthを利用しておくのが良さそうです。
 
まだviewportの設定は色々あるのですが、今回はここまで。
次回はviewportのその他の設定について試したいと思います。
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


× 4 = 二十 四


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>