viewportの使い方

viewportは今までコピペで流用することがほとんどだったので、勉強としてviewportのcontentに設定できる値を調べてみました。

設定できる値

実際にはほかにもあるみたいですが、基本的にはcontentには以下の値を設定できるようです。

サンプルコード

実際にviewportを設定して試してみます。
幅に応じてMedia Queriesでテキストを出しわけるサンプルを作成しました。

HTML

<div class="breakPoint pc">980～</div>
<div class="breakPoint tb">640～979</div>
<div class="breakPoint sp">0～639</div>

CSS

.breakPoint {
	display: none;
}

@media screen and (min-width: 980px) {
	.pc {
		display: block;
		background: red;
	}
}/*-- min-width: 980px END --*/

@media screen and (min-width: 640px) and (max-width: 979px) {
	.tb {
		display: block;
		background: green;
	}
}/*-- min-width: 640px and max-width: 979px END --*/

@media screen and (min-width: 0px) and (max-width: 639px) {
	.sp {
		display: block;
		background: blue;
	}
}/*-- min-width: 0px and max-width: 639px END --*/

このサンプルのviewportの設定を変更して、挙動を確認しました。

viewport指定なしの場合。
viewport指定なしのデモページ
　

viewport width=768の場合。

<meta name="viewport" content="width=768" />

viewport width=768のデモページ
　

viewport width=device-widthの場合。

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

viewport width=device-widthのデモページ
　

viewport initial-scale=1.0の場合。

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

viewport initial-scale=1.0のデモページ
　

viewport initial-scale=2.0の場合。

<meta name="viewport" content="initial-scale=2.0" />

viewport initial-scale=2.0のデモページ
　

viewport width=device-width, initial-scale=1.0の場合。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

viewport width=device-width, initial-scale=1.0のデモページ
　

viewport user-scalable=noの場合。

<meta name="viewport" content="user-scalable=no" />

viewport user-scalable=noのデモページ
　

viewport maximum-scale=1.2の場合。

<meta name="viewport" content="maximum-scale=1.2" />

viewport maximum-scale=1.2のデモページ
　

viewport minimum-scale=0.9の場合。

<meta name="viewport" content="minimum-scale=0.9" />

viewport minimum-scale=0.9のデモページ
　

ちなみに、Googleのモバイルフレンドリーでは以下のようになっています。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

固定幅で表示させたい場合

<meta name="viewport" content="width=768" />

可変幅の場合

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

という使い分けでよいと思います。
　

【参考サイト】

• meta 要素 – HTML | MDN
• もう逃げない。HTMLのviewportをちゃんと理解する – Qiita