レスポンシブサイトのビューポート（meta viewport）の書き方まとめ。PC、タブレット、スマホの見え方デモ付き。

レスポンシブサイトのビューポートの書き方について、サイトの見せ方によっては以外と難しいのでまとめました。

ビューポートを書かないとタブレットやスマホで正しく表示できないので必ず書くようにしましょう。

まずサイトの構成ですが、ヘッダーの下に、サイドとメインカラム、その下にフッターのコピーライト、というようなよくある配置にしました。

スマホは縦に並べます（実際はハンバーガーメニュー等がつく場合が多いですが省略します）

表示イメージ

※表示の切り替えは、760pxをブレイクポイントとしてCSSで切り替えるものとします。

サイトのパターン

レスポンシブサイトと言っても大きく2種類あります。

Ａ．常にブラウザ幅に収める

Ｂ．スマホ以外は固定幅（スマホ以外は1400px固定にする等）

どちらにもメリット・デメリットや好みがあります。

デザインにもよりますが、一般的にＡは時間がかかります。私がいただく案件はどちらかと言うとＢが多いです。

Ａ．常にブラウザ幅に収めるサイトの場合

Ａのビューポートは簡単で以下です。

※常にブラウザ幅に収めるので等倍で表示します。

Ａのデモページ

ブラウザ幅を伸ばしたり縮めたりしてもサイト幅がブラウザ幅を超えることはありません（デモページは1400pxをMAXサイズとしています）

ちなみに、この場合のタブレット（横）の見え方は以下となります。

※等倍表示で、常にデバイス（ブラウザ）幅に収まります。

※ちなみに、タブレットを縦にした場合は、タブレットのサイズによりPC表示になったりスマホ表示になったりします（CSSで760pxをブレイクポイントとしてPC・スマホの切り替えを行っているため）

Ｂ．スマホ以外は固定幅

問題はこちらの場合です。

スマホはブラウザ幅に収めるようにように表示しますが、それ以外は固定幅という場合です。

スマホの判定方法は色々ありますが、前述の通りブラウザ幅で判定する（760px以下でスマホ）こととします。

ということで「760px以下はスマホ表示、それ以外は1400pxサイズ固定」というサイトで、4つのビューポートを記述し、タブレットとスマホでそれぞれどのように見えるか確認していきます。

使用したタブレットはiPadmini第6世代、4つともCSSの記述は同じという条件です。

PCでの表示はビューポートの影響を受けませんのでデバイス毎の見え方画像には含めていません。

1つ目

●タブレット横・・・横幅ぴったりの収まっていて理想的です。

●タブレット縦・・・はみ出ています。

●スマホ・・・CSSで記述したスマホのスタイルが当たっていません。

1つ目のデモページ

2つ目

●タブレット横・・・横幅ぴったり収まっていて理想的です。

●タブレット縦・・・スマホのスタイルが当たっています（iPadmini第6世代の短い方の幅が744pxなのでCSSでの記述通りとなります）

●スマホ・・・ばっちりです。

2つ目のデモページ

ここで理解しておきたいのが、この「タブレット横」の見え方と、Ａのタブレット横の見え方は若干違います。

こちらは「1400px幅サイトをタブレット幅にぴったり収まるように縮小」しているのに対し、Ａは縮小していません。なのでこちらの方が若干文字が小さくなります。

3つ目

●タブレット横・・・ブラウザからはみ出ています。

●タブレット縦・・・スマホのスタイルが当たっています（iPadmini第6世代の短い方の幅が744pxなのでCSSでの記述通りとなります）

●スマホ・・・ばっちりです。

3つ目のデモページ

ビューポートに「initial-scale=1.0」と記述しているので等倍表示となり、iPadmini第6世代の横幅1133pxをはみ出します。

はみ出ていると見づらい上に、スクロールさせると左右にブレるのでストレスもあります。

4つ目

●タブレット横・・・横幅ぴったり収まっていて理想的です。

●タブレット縦・・・iPadの幅744pxに対してPCのスタイルが当たっています。

●スマホ・・・PCのスタイルが当たっています。

4つ目のデモページ

Ｂのまとめ

Ｂの場合は2つ目の

<meta name="viewport" content="width=device-width">

が良さそうですが、コンテンツの内容によってタブレットでサイト全体がはみ出てしまうことがあります。

これで見え方に問題ない場合はこれでいいと思います。

「確実にタブレットでデバイス幅に収めたい、タブレットでは縦でも横でもPC表示で良い」という場合は、以下にすると良いです。

【スマホ】

<meta name="viewport" content="initial-scale=1.0">

※<meta name="viewport" content="width=device-width, initial-scale=1.0">と同じ意味です。

【スマホ以外】

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

※〇〇〇には固定サイト幅を入れる

※スマホとそれ以外でビューポートを分ける記述をするにはphpやjsなどで可能です。（ただしjsはページを読み込んでから反映されガチャつきますので、できればphpなどサーバーサイドで実行される方法で記述するのが最適です）

以上です。