制作のご相談はこちら
つまづきやすいスマートフォン向けサイト用viewport設定

2014年11月13日

つまづきやすいスマートフォン向けサイト用viewport設定

スマートフォン向けサイトを作成する際に
デバイスの種類も多様化し、レスポンシブレイアウトを採用することが多いかと思われます。
私もレスポンシブデザインを取り入れ、メンテナンスのしやすいよう作成しております。

デザインも完成し、いざコーディング!となるのですが、
このviewport(ビューポート)の設定次第でそのサイトの使いやすさが決まるといっても過言ではありません。

viewportとは?

携帯端末でのウェブページ表示のための記述です。
これを設定しないと携帯端末で見てもPCの画面幅で表示されます。
viewportに値が色々設定できるのですが、この値によって携帯端末での表示方法が変更できます。

構文

<meta name="viewport" content="値, 値…">

viewportの値

width

表示領域の幅を設定できます。
200px~10000pxの範囲で設定可能です。初期値は980px。
端末画面の幅に合わせる場合はdevice-widthを設定します。

height

表示領域の高さを設定できます。
200px~10000pxの範囲で設定可能です。初期値は自動。
端末画面の高さに合わせる場合はdevice-heightを設定します。

initial-scale

ズーム倍率の初期値を設定できます。
minimum-scale,maximum-scale の範囲で設定可能です。
デフォルトではページを画面に合わせます。

minimum-scale

最小倍率を設定できます。
0~10の範囲で設定可能です。初期値は0.25。

maximum-scale

最大倍率を設定できます。
0~10の範囲で設定可能です。初期値は1.6。

user-scalable

ズームの操作可否を設定できます。
yesまたはnoで設定可能です。

おすすめテンプレート

viewportの設定を勘違いしたままコーディングを進めると、
ブラウザ確認した時にうまく表示されていなかったり、無駄な修正をしてしまったりとよく苦しめられました。
なので、今までの経験を踏まえておすすめの値を作成しました。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-widthでデバイスごとに画面幅を調節します。これを固定数値にしてしまうとどのデバイスでもその画面幅で表示されてしまうので、レスポンシブ対応にはおすすめできません。
※逆を言えば確実にその幅のレイアウトしか表示されないので、応急措置として数値を入れるのもありかもしれません。
initial-scale=1.0で携帯端末を横向きにした場合、ページ全体を活用することができます。
縦向きのデザインが横に伸びるイメージです。
minimum-scale=1.0, maximum-scale=1.0, user-scalable=noでズームが出来ないように設定しています。
※個人的にはズーム機能はなくてもいいかなと思っています。ユーザーにはズーム操作は手間ですし、デザイン自体をズームしなくてもいいような仕上がりにするのが最適ではないでしょうか。