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のその他の設定について試したいと思います。