この記事ではveiwportの設定方法と、最適な設定値を考察します。
veiwport？てなんだっけ？
ビューポートと呼ぶんだ！veiwportは、サイトをスマホやタブレットで最適に表示するために必要な設定だよ
veiwportはサイトをスマホやタブレットで適切に表示するための設定で、これがないとサイトを思った通りに表示させることができません。
基本的にやることは、設定するための記述を1行追加するだけなので、概要を理解してしまえばとても簡単です。
この記事では下記のようなゴールを目指して解説しています。
- veiwportの考え方がわかる
- veiwportが使えるようになる
- veiwportの最適な値がわかる
ひとつずつわかりやすく解説していくよ！
veiwportとは？
viewport（ビューポート）とは、ページが表示される領域のことを指します。
- PCの場合は、viewport ＝ ブラウザのウィンドウ
- スマホやタブレットの場合は、viewport ＝ デバイスの画面全体
なぜviewportの設定が必要なのか
どんなデバイスを使っているかによって細かい数値は変わりますが、スマホでは初期状態でviewportを約980pxとみなします。viewportの横幅が980pxということは、スマホの左橋から右端までが980pxになるようなサイズ感でWEBサイトが表示されるということです。
viewportの横幅が980pxとなると、普段PCでみているようなサイトを小さなスマホのなかにぎゅっと押し潰して表示するこのとになります。この設定のままでサイトを見ると、文字や画像全てなどが小くて非常に読みづらい状態になってしまいます。
昔は、スマホ対策など考えず、スマホでもPCサイトをそのまま表示していたので、この設定を変えなくてもよい時代もありました。
しかし、スマホユーザーが大きく増えたため、スマホに最適化した見た目にすることは常識となっているので、上記のような例の見た目のままでは、読みづらいサイトと思われるでしょう。
そうならないように、viewportを適切な値に変更し、どんなデバイスでもしっかりと読めるサイズ感で表示されるように調整する必要があるのです。
PCに関しては特に設定は必要ありません。
viewportの使い方
veiwportはHTMLのheadの中に、metaタグを使って指定をします。例えば下記のように記述します。
meta name="viewport" content="width=400"詳細な解説は後述しますが、このように記述するとviewportの横幅に400pxが設定されます。viewportが400pxに設定された場合、デバイスの横幅を400pxとしてサイトが表示されることになります。
初期設定の980pxに比べれば、だいぶ見やすいサイズになりますね。
widthに固定値は入れない方が良い
ただし今回の例のように「width=400」と固定値で指定する方法はあまりお勧めできません。その理由や理想的な設定値は後述するので、今は記述方法をなんとなく頭に入れておいてください。
viewportに設定できるプロパティ
viewportには横幅だけでなく、様々な設定を記述することができます。viewportに複数のプロパティを指定する場合は、カンマで区切って指定していきます。
meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”この例では、下記のような5つのプロパティをカンマで区切って設定しています。
- width=device-width
- initial-scale=1
- minimum-scale=1
- maximum-scale=1
- user-scalable=no
それぞれのプロパティについて解説していきます。
widthプロパティとは
widthは表示領域の横幅を指定します。値はpxで数値を指定するか、device-widthを指定します。
meta name="viewport" content="width=320"
meta name="viewport" content="width=device-widthwidthに数値が設定されると、その値が表示領域の横幅となります。
一方、device-widthが指定されると、使用しているデバイスの「CSSピクセル」が表示領域の横幅となります。例えば、iphone6の場合はCSSピクセルが375pxなので、表示領域は375pxになります。
device-widthを使うことで、様々なサイズのデバイスに応じた表示領域に設定することが可能です。基本的にはwidthには数値ではなく、device-widthを使うことになるでしょう。
CSSピクセルとは?
解像度にはデバイスピクセルとCSSピクセルがあります。 デバイスピクセルはそのデバイスの実際のピクセルで、CSSピクセルとはブラウザで表示させるための擬似的なピクセル数のことを指します。
スマホやタブレットは高解像度化が進み、ピクセルの粒はどんどん小さくなってきました。例えばiphoneやipadなどで使われているratinaディスプレイのデバイスピクセルは、これまでの倍のピクセル数になっています。
デバイスピクセルが大きくなると、そのままではあらゆるものが小さく表示されるという問題点があります。例えば、フォントサイズ16pxの文字があったとして、PCでは読みやすい大きさですが、解像度が倍のモニタで見ると、1ピクセルの大きさが半分程度になるので、文字サイズも半分程度になり小さすぎて読みづらいということが起こります。
そこで、デバイスピクセルとは別に、ブラウザで表示するとき用の擬似的なピクセル数である、CSSピクセルを用意して、サイズが小さくなりすぎる問題を解消しています。
例えば、iphone6の場合、ratinaディスプレイのため従来よりきめ細かくなり、デバイスピクセルは700pxもあります。一方、CSSピクセルは375pxと決められているため、実際にブラウザ何かを見るときは画面幅が375pxとするようなサイズ感で表示され、適度な大きさで違和感なく閲覧することが出来るのです。
heightプロパティとは
height は、表示領域の高さを設定します。値はpxで数値を指定するか、device-heightを指定できます。device-heightを指定すると、デバイスのCSSピクセルでの画面の高さが設定されます。
meta name="viewport" content="height=600"
meta name="viewport" content="height=device-height一応紹介していますが、基本的に表示領域にheightを使うことはありません。
initial-scaleプロパティとは
initial-scaleは最初に表示された時の倍率を指定します。
基本は「1」を指定します。指定しない場合は、initial-scale=1と自動的に設定されますが、古いブラウザも考慮して一応指定しておくのが良いでしょう。
meta name="viewport" content="width=device-width, initial-scale=1"minimum-scale と maximum-scaleプロパティとは
minimum-scale と maximum-scale は、最小倍率と最大倍率を指定します。
- minimum-scale
- 最小倍率を指定します。初期値は0.25で、0より大きく10未満の値を設定します。
- maximum-scale
- 最大倍率を指定します。初期値は1.6で、0より大きく10未満の値を設定します。
下記のように設定さていた場合、ユーザーは0.1倍から3倍のズームを許可することになります。
meta name="viewport" content="minimum-scale=0.1, maximum-scale=3※この設定はデバイスによっては全く効果がない場合があります。
user-scalableプロパティとは
user-scalable は、ズームを許可するかどうかを指定します。
<meta name="viewport" content="width=device-width,user-scalable=no">値には下記のようなものが入ります。
- yes…ズーム操作有効
- no…ズーム操作無効
- 1…yesと同じ。ズーム操作有効
- 0…noと同じズーム操作無効
初期値はyesになっており、拡大縮小が許可されています。
※この設定はデバイスによっては全く効果がない場合があります。
veiwportの最適値
いろんな設定パターンがありますが、現在はgoogleによって推奨されている設定方法があるのでそれを使うのが良いでしょう。他サイトなどをみても主流となっているので、特別な理由がなければこちらを使い回して問題ありません。
おすすめのviewport
meta name="viewport" content="width=device-width, initial-scale=1"参考：ビューポートを設定する
非常にシンプルな設定です。widthにdevice-widthを指定することで、表示領域をデバイスのCSSピクセルに設定しています。initial-scale=1で初期状態のズームを等倍にしています。
特に理由がなければこの設定で問題ありません。
ズームの値を制御したり禁止したりしたい場合はさらにオプションを追加していけば良いでしょう。その場合は下記の他サイトのviewportを参考にしてみてください。
有名サイトのveiwport
有名なサイトのviewportを調べてみました。基本的には推奨している書き方と同じでしたが、中にはズームを制限する記述を追加しているサイトもありました。
microsoft
<meta name="viewport" content="width=device-width, initial-scale=1">おすすめしたviewportと同じだね
apple
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">viewport-fit=coverとは
iphoneXを横向きにした時にできる余分なスペースを削除するための記述です。
evernote
<meta name="viewport" content="width=device-width, initial-scale=1.0">おすすめしたviewportと同じだね
slack
<meta name="viewport" content="width=device-width, initial-scale=1">おすすめしたviewportと同じだね
YouTube
<meta name="viewport" content="width=device-width, initial-scale=1">おすすめしたviewportと同じだね
LIG
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">ズームを無効にしているね。ズームを無効にしたい人は参考にしよう！
TOYOTA
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, shrink-to-fit=no">shrink-to-fit=noとは
これは古いiosのバグ対応のための記述と思われます。使っているユーザーも殆どいないのであえて記述する必要はないでしょう。
三菱UFJ銀行
<meta name="viewport" content="width=device-width, initial-scale=1.0">おすすめしたviewportと同じだね
川崎市
<meta name="viewport" content="width=device-width, initial-scale=1.0">おすすめしたviewportと同じだね
資生堂
<meta name="viewport" content="width=device-width">initial-scale=1.0 を省略した形だね。省略してもほとんどの場合問題ないけど念のため省略しない方がいいかな
まとめ
- viewport（ビューポート）とは、表示領域のこと
- デフォルトではviewport(＝表示領域)の横幅を約980pxとみなしてサイトを表示する
- viewportタグをつかって表示領域のサイズを指定することで、適切なサイズ感で表示がされるように調整する必要がある
- widthにdevice-widthを指定すると、デバイスのCSSピクセルでの画面の幅が設定される
