これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。
最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。
この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。
パターン1: 何も考えずに HTML を書く
まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body>
<img src="/images/logo-ja.png">
<p>色んな素材がごった煮になった様子をお椀で表現しています。
湯気が<strong>「てっく」</strong>に見えるのが隠し味になっています。
「てっく煮」の右肩の「+4」 を「と、よん」と読むことで、
ドメイン名の tech.nitoyon.com と等しくなります。</p>
</body>
表示結果
iPhone 3GS (iOS 5.1.1) で表示してみた (デモ ページ)。
スマホ対応していないサイトを表示した状態だ。
スマホートフォンは PC 向けのサイトを表示するときには、「横幅 980px 向けにデザインされている」という前提で描画する。結果として、文字が小さくなる。
どれぐらい小さくなるか、iPhone を例に調べてみよう。iPhone のそれぞれの世代で、横幅 980px のページがどれぐらい縮小されて表示されるかを計算してみた。
| 世代 | 解像度 | 縦向き | 横向き |
|---|---|---|---|
| iPhone 1～3 | 320px × 480px | 32.7% | 49.0% |
| iPhone 4 | 640px × 960px | 65.3% | 98.0% |
| iPhone 5 | 640px × 1,136px | 65.3% | 116.0% |
iPhone 4 以降の縦向き (Portrate mode) で 980px の PC 向けサイトは 2/3 に縮小して表示される。Retina ディスプレイで 2/3 のなので、文字はかなり小さくなる。ピンチ操作で拡大しないと読めない人も多いだろう。
採用例
このパターンでもデザインを工夫すれば、スマートフォンやタブレットでも見やすくなる。その代表格が Apple である。
ここでは詳しく触れないが、pxt | 考察：Appleはスマホサイトを作らない。 に分かりやすく書いてあるので、興味がある人は読んでみるとよいだろう。
(追記) 2014 年 9 月、iPhone 6 発表のタイミングに合わせて、Apple のサイトもスマートフォン対応しました。このページの分類でいうと「パターン4」を使っています。
パターン2: viewport でデバイスの横幅を指定する
「スマホ向けにデザインしているよ」と主張するには <head> タグの中に viewport を 1 行追加すればよい。
<meta name="viewport" content="width=device-width">
width=device-width というのは「デバイスの横幅で描画してください」という意味である。
一昔前は iPhone 前提で width=320px と指定すれば十分だったが、解像度がまちまちな Android やタブレット端末が登場したため、width=device-width と指定するのが新常識になった。
表示結果
表示するとこうなる (デモ ページ)。
横向きにしたときには、縦向きのときの画面を引き伸ばして表示しようとするので、かなり拡大された印象になる (iPhone 4 までで 1.5 倍、iPhone 5 では 1.7 倍)。
字が大きくなって読みやすくなるが、画面内の情報量が少なくなる。
採用例
あまり見たことがないが、たとえば、はてなブックマーク スマートフォン版 のソースを見ると、
<meta content="width=320, minimum-scale=0.5" name="viewport" />
となっている。320px とあるので、旧世代の指定のままだ。現実問題として、Nexus 7 で閲覧すると 320px だと信じて描画するので、フォントがでかすぎて見づらい。
パターン3: 回転してもサイズを変えたくないケース
スマートフォンのネイティブ アプリの動作をみていると、横向き (Landscape mode) にしたときには１行に表示する文字の数が増えるものが多い。
例えば、iPhone 3GS 標準のメモ アプリがそうである。
Web においても同様に「横向きのときは一行の文字数を増やしたり、追加の情報を表示したりしたい」という欲求がでてくる。
そのような場合は、viewport を次のように書きなおせばよい。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
あわせて CSS に次のように指定しておく。
body {
-webkit-text-size-adjust: 100%;
}
(理由は -webkit-text-size-adjust: none を絶対に設定してはいけない理由 を参照)
表示結果
横方向のときには次のようになる (デモ ページ)。
メモ アプリの利用イメージに近くなった。
ただし、この指定にしてしまうと、ピンチによる拡大・縮小ができないという大きな弱点がある。
採用例
数多くの大手サイトがこの方式を採用している。Google も Yahoo! Japan も twitter も facebook も全部これである。
「ピンチできない」という大きな欠点はあるものの、端末の縦横方向を変えたときに画面内の情報量を減らしたくないないので、このパターンを採用せざるをえないのだろう。
向きを変えたときに横幅が変わりつつピンチも使えるような手段が提供されるのが理想なのだが、現在のところ、そのような指定をする方法はない。
補足
viewport で指定してるのは長ったらしい値は、次のようになっている。
width = device-width
initial-scale = 1.0
minimum-scale = 1.0
maximum-scale = 1.0
user-scalable = no
この設定により、iPhone と Android でページの表示倍率が 1.0 固定にして、ページのピンチができないようにしている。
その結果、ページの表示倍率が変わる余地をなくしている。表示倍率が変えられない状態になってはじめて、WebKit は仕方なくページの横幅を変えてくれるようだ。
パターン4: 拡大・縮小は認めたいケース
記事を公開したあと、コメント欄で教えてもらったのがこのパターン。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
と設定することで、「ピンチは可能」かつ「横向きにしたときに 1 行の情報量が増える」を実現できる。
文字のサイズを固定化したいなら、パターン 3 と同じように CSS に次のように指定しておく。
body {
-webkit-text-size-adjust: 100%;
}
(理由は -webkit-text-size-adjust: none を絶対に設定してはいけない理由 を参照)
採用例
Bootstrap のサイトはこのパターンだし、jQuery mobile の Getting Started でもこのパターンが推奨されている。
方向を変えたときに、表示倍率が変わってしまうのが少し気になったが、利用者が自由に拡大・縮小できるので自由度が高い。
まとめ
以上の内容を表でまとめる。
| 番号 | 選ぶポイント | 弱点 | 採用数 |
|---|---|---|---|
| 1 | PC 向けのサイトをスマホで見ても、十分に見やすいとき。 | 初期状態の文字が小さい。 | － |
| 2 | 縦向き・横向きでレイアウトを変えたくないとき。 | 横向きにしたときに極端に拡大される。 | △ |
| 3 | サイトの使い勝手をアプリっぽくしたいとき。 | ピンチで拡大・縮小できない。 | ◎ |
| 4 | 縦向き・横向きに対応しつつピンチも許可したいとき。 | 向きを変えると表示倍率が変動する。 | ○ |
このブログでも、ピンチできないのは不便だけど、結局、他の大手サイトと同じく 3 番目を採用した。