veiwport の設定方法まとめ！最適な設定方法はこれ

viewport（ビューポート）とは、表示領域のことを表します。

PCの場合、viewport(＝表示領域)は、ブラウザのウィンドウになります。

ところがスマホの場合、デフォルトではviewport(＝表示領域)の横幅を約980pxとみなしてサイトを表示します。(※デバイスよって多少異なります)

viewport(＝表示領域)の横幅が約980pxということは、ブラウザの左橋から右端までが980pxになるようなサイズ感で表示されるということです。

そうなるとPCサイトくらいのサイズのものを、小さなスマホのなかにぎゅっとして表示するこのとになるので、文字や画像がとても小さく見づらいサイトになってしまいます。

そうならないように、スマホやタブレットの場合は、viewportタグをつかって表示領域のサイズを指定することで、適切なサイズ感で表示がされるように調整する必要があります。

例えば下記のように設定します。

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

上記のようにすると、横幅400pxのviewportが作成されます。viewportが400pxだと、ブラウザの左橋から右端までを400pxとするようなサイズ感で、サイトを表示することになり、スマホでは最適なサイズになるでしょう。

viewportの使い方

上述したように、viewporを使えば表示領域のサイズを設定することが出来ますが、そのほかにもユーザーにズームを許可するかどうかなどの設定も行うことができます。

いろんな設定パターンがありますが、現在はgoogleによって推奨されている設定方法が主流となっていて、それをコピペで使えば大抵の場合問題なく表示されると思います。

その設定方法がこちらです。

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

参考：ビューポートを設定する

viewportの詳細

viewportの理解を深めるためにも、各プロパティの働きも理解しておきましょう。

viewportに複数のプロパティを指定する場合は、カンマで区切って指定します。

widthプロパティ

widthは表示領域の横幅を指定します。値はpxで数値を指定するか、device-widthを指定できます。

device-widthを指定すると、デバイスのCSSピクセルでの画面の幅が設定されます。

CSSピクセルとは

スマホやタブレットは高機能化が進み、解像度がすごくきめ細かくなりました。その結果1つ1つピクセルの粒が小さくなり、同じフォントサイズ16pxとしても、高解像度のスマホで見るとものすごく小さくなってしまいます。

そこで、デバイスのきめ細かさにかかわらず、どんなデバイスでもだいたい同じ表示サイズになるような架空のピクセルが用意されました。それが、CSSピクセルと呼ばれるものです。

例えば、iphone6の場合、ratinaディスプレイのため従来よりきめ細かくなり、あの大きさで横のピクセル数は700pxもあります。ですが、CSSピクセルは375pxとなっており、実際にCSSで指定するときは375px画面幅とするようなサイズ感で指定します。

width=device-widthとすると、そのデバイスの持つCSSピクセルが横幅が設定されるので、デバイスごとに最適化されたサイズにすることが出来ます。

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

※device-width を指定した場合、初期のズーム倍率が 1 になります。

heightプロパティ

height は、表示領域の高さを設定します。値はpxで数値を指定するか、device-heightを指定できます。

device-heightを指定すると、デバイスのCSSピクセルでの画面の高さが設定されます。

基本的に、heightを使うことはありません。

<meta name="viewport" content="height=600">
<meta name="viewport" content="height=device-height">

initial-scaleプロパティ

initial-scaleはズーム倍率を指定します。

基本は「1」を指定します。

width=device-widthを設定すれば、initial-scaleをあえて「1」としなくても自動的に1になります。ただし、古いブラウザも考慮して指定しておくのが良いでしょう。

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

minimum-scale と maximum-scaleプロパティ

minimum-scale と maximum-scale は、ズームできる倍率を指定します。

下記のように設定すると、0.1倍から3倍のズームが出来ます。

<meta name="viewport" content="minimum-scale=0.1, maximum-scale=3">

user-scalableプロパティ

user-scalable は、ズームを許可するかどうかを指定します。

• yes…ズーム操作有効
• no…ズーム操作無効
• 1…yesと同じ。ズーム操作有効
• 0…noと同じズーム操作無効

※ズームの制限をすると、ユーザーの行動を制限してストレスの原因になるので、あまり使わないほうがよいでしょう。

まとめ

• viewport（ビューポート）とは、表示領域のこと
• デフォルトではviewport(＝表示領域)の横幅を約980pxとみなしてサイトを表示する
• viewportタグをつかって表示領域のサイズを指定することで、適切なサイズ感で表示がされるように調整する必要がある
• <widthにdevice-widthを指定すると、デバイスのCSSピクセルでの画面の幅が設定される>