レスポンシブサイト制作には不可避！Viewportの基本についてまとめ【再確認】

いつもなんとなくで使ってしまいがちですが重要なビューポート。不適切なコードを適当にコピペで使ってしまうと、後々レイアウト調整がめんどくさくなったり、css書き直しになったりします。怖すぎますね！

新規サイト作成の受注が増えてきたので、覚書としてviewportの基本的な構造について書いていきたいと思います。

そもそもViewportって具体的に何？

日本語に訳するとViewport＝「表示領域」。ここ何年かのスマートフォンやタブレットの普及に伴い、Webサイトも色々な端末サイズに合わせて制作する需要がすごく増えてきました。

PC向けのサイトをスマホで見た時、画像が小さすぎたり文字サイズが小さすぎたりですごく読みずらかったりしますよね。ちょっと古いPCサイトとかだと、Viewportが書かれてなかったりするのも見たことあります。

Viewportとはhtmlのmeta要素のname属性として値を設定することで、Webページを表示する際ブラウザに、どれくらいのスケールでWebページを表示するかの制御をする役割を果たします。近年のマルチデバイス対応に向けて重要視されてきてるようです。

どんな指定ができるのか？

これはレスポンシブサイトでよく使われている指定方法になります。これを例にして解説していきます。

name（meta要素）name=”viewport”　→ 今から表示領域の設定をします、と宣言する。
Content（属性）content=”width=device-width, initial-scale=1″　→　表示領域をこのように設定します、と言った具体的な指示を宣言する。

この例ではdevice-width、initial-scale=1が指定されていますね。

これは
width＝デバイスのウィンドウ横幅に合わせる
initial-scale（初期倍率）＝等倍にする
といった指定がされている事になります。
複数の属性値がある場合は「,（カンマ）」で区切ります。

initial-scaleって？

ページが最初にロードされたときの拡大率を制御します。
initial-scale=1だと等倍表示。
widthをdevice-widthにした場合、自動的にinitial-scale=1となります。その逆も然りで、initial-scale=1を指定した場合には自動的にwidth=device-widthになります。

という事は、この例で指定しているdevice-widthとinitial-scale=1のどっちかが不要って事になりますよね。ですがマイクロソフトが出してるWindowsPhoneというスマホのIEでは、initial-scaleがサポート外との事です。なのでやっぱり両方つけといたほう良いのではと言った意見もあるようです。

ただ日本では、WindowsPhoneのシェアは極めて低いらしいので、日本国内のユーザーが対象であれば基本的にどちらか1つをつけて置けば問題ないようです。

私はWindowsPhoneなんて見たことも触ったこともないのに、無駄にいつも両方指定していました。
とくにこれからもWindowsPhoneを対象端末に入れる予定もないし、今後は「initial-scale=1」だけでいいかなって思ってます。

ちなみにこのサイトではviewport-fit=coverも指定してます。これはiPhoneX以降のsafariのランドスペースで表示されるセーフエリア対策です。サイトに応じて必要ならつけたほうがいいかも。

以下はviewportで指定できる値になりますが、基本的にはwidth、initial-scale、viewport-fit以外はあまり使うことがないかと思います。

Viewportで指定できる値一覧

width 横幅	ウィンドウ横幅。初期値980px。具体的な数値（200px〜10000px）以外に、自動的にデバイスの表示幅を取得するdevice-widthが指定できる。
height 縦幅	ウィンドウ高さ。初期値は「横幅とのアスペスト比から計算される値」。 200px～10000pxで指定。もしくはdevice-height。
initial-scale 初期倍率	10〜1000％、もしくは0.1〜10.0で指定可。
minimum-scale 最小倍率	ユーザーがズームできる最小倍率。初期値0.25。0〜10の数値を指定可。
maximum-scale 最大倍率	ユーザーがズームできる最大倍率。初期値1.6。0〜10の数値を指定可。
user-scalable ズーム操作の可否 iOS10からは非対応に。	ユーザーのズーム操作を可能にするか、不可にするか。yes/noで指定。初期値はyes（ズーム操作可能）。
viewport-fit ランドスペース表示時にビューポートが画面をどのように埋めるかを制御	初期値はauto。 contain（ウィンドウ左右にセーフエリアとった余白が出現する。見た目はsafariではaotoと同じ）、cover（ウィンドウ全てを使用して表示）

viewportとブレークポイントの関係に注意！

さて、レスポンシブサイト作成にあたって恐らく主流とされているのが、
メディアクエリによるビューポートサイズごとのスタイル出しわけ。大体こんな感じで使われます。

@media screen and (max-width:499px) {/* ビューポートサイズが499pxまでこのcssのスタイルが適用 */}
@media screen and (min-width:500px) and (max-width:959px) { /* 500pxから1024pxまでこのcssのスタイルが適用 */}
@media screen and (min-width:1025px) {/* 1025px以上はこのcssのスタイルが適用 */}

head内に指定する方法もある。

<link rel="stylesheet" type="text/css" href="common.css"><!--　mediaを指定しない場合は初期値のallが適用される -->
<link rel="stylesheet" type="text/css" href="common_sp.css" media="screen and (max-width:499px)"><!-- ビューポートサイズが499pxまでこのcssのスタイルが適用 -->
<link rel="stylesheet" type="text/css" href="common_tab.css" media="screen and (min-width:500px) and (max-width:1024px)"> <!-- 500pxから1024pxまでこのcssのスタイルが適用 -->
<link rel="stylesheet" type="text/css" href="common_pc.css" media="screen and (min-width:1025px)"><!-- 1025px以上はこのcssのスタイルが適用 -->

でもこれ、viewportを適切に指定しないと思い通りに効きません。

悪い例

html

<meta name="viewport" content="width=750">

css

@media screen and (max-width:499px) {/* ビューポートサイズが499pxまでこのcssのスタイルが適用 */}
@media screen and (min-width:500px) {/* 500px以上はこのcssのスタイルが適用 */}

PC以外で強制的にコンテンツ幅を750pxにしてるのに、cssのブレークポイントは499pxになってます。コンテンツ幅が499pxになる事はないので、表示が切り替わるわけがないですね！
viewportのコンテンツ幅を数値で指定する場合は、ブレークポイントの数値も合わせて指定する必要があります。
そもそも数値で指定するのって何かメリットあるんでしょうか・・・？

ちなみにスマホなどのデバイスでのビューポートサイズは、cssピクセルで描画されるサイズになります。こちらも参考にどうぞ。

【cssピクセル】レスポンシブサイトを作る時のピクセルの考え方。適切なサイズでWebサイトを制作しよう！

まとめ

レスポンシブサイトを制作する時は、基本的に下記で問題ないかと思います。

もし数値で指定する場合は、ブレークポイントと数値を合わせる事を忘れないようにしましょう。
Viewportの役割をきちんと理解し、Webサイトの用途やターゲットブラウザに対して、どのような指定が最適なのかを判断できることがすごく重要だと思います😊

何かあった時の迅速なトラブルシューティングにも繋がります！

出典：blog.鶯梭庵/links/たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる