スマートフォンの画面サイズとフォントサイズ
今回、初めてのスマートフォンサイト作成で、画面サイズ、フォントサイズの設定を行ったので覚書です。
スマートフォンの画面サイズ
まず、画面サイズはiPhoneが320×480pxなので、これを基準にデザインするといいと思います。
ただ、他のAndroidなどの機種はこれと若干異なります。そこでviewpointを指定して、表示領域を指定します。
<head> ... <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> ... </head>
「width=device-width」は、iPhoneの場合に横幅が320pxに指定され、その比率で縦幅が決定するわけです。他のデバイスについても同様です。つまり、表示するデバイスの解像度に依存することなく、横幅が320pxでデザインされたサイトが、きっちり収まった状態で閲覧できるわけです。
スマートフォンでは、端末を横にすると縦幅と横幅が逆転します。iPhoneでいうと横幅が480px、縦幅が320pxになるわけです。その場合も上記のようにviewportを指定しておけば、表示領域は確保されます。
ここで考えられるのは、端末によって縦横比が違うという問題です。デザインを横幅固定の320pxで作成しても、縦幅の表示領域は端末によって異なるということです。したがって、フッター固定など縦幅を意識したデザインはおそらく実現困難でしょう。
ただ、ほとんどの端末の縦横比はそう変りません。正方形の端末、縦に異常に長い端末なんてないですよね。極端に変にはならないにしても、若干の縦幅のズレは意識したデザインが好ましいでしょう。
スマートフォンのフォントサイズ
通常のWebサイトでは、視力の弱い人が大きな文字で見れるように、CSSでフォントサイズをパーセント指定します。パーセント指定すると、ブラウザの文字サイズ変更が有効になります。一方、ピクセル指定すると、文字サイズが固定されてしまいます。
スマートフォンではピンチで画面の拡大ができるので、上記の指定方法のどちらでもいいのでわないかと思います。
ただ、パーセント指定した場合に、iPhoneではフォントサイズが自動調整されてしまいます。つまり、画面を縦にしたり横にしたりすると、フォントサイズが小さくなったり大きくなったりといった現象が発生してしまいます。
そこで、以下のようにSafari独自のレンダリングを指定することで、フォントサイズの自動サイズを無効化します。
html{
-webkit-text-size-adjust: none;
}
標準化を好む私にとっては、ハック的なコードは書きたくないのですが、仕方ないですね。
ただ一度の構築経験をもとにしているので、この内容が適切かどうか。
間違いがあればご指摘くださーい。
コメントする