ビューポートの説明と設定

Webページをスマートフォンで見ると、文字が小さく表示されることがあります。

本ページでは、ビューポートについて説明するとともに、スマートフォンでの対応方法を説明します。

ビューポートとは

ビューポートは、ブラウザのタブなどを除いた、ページを表示する領域のことを言います。

スマートフォンでは、ビューポートを理解して設定を行わないと、文字が小さく表示されてしまいます。次からは、その理由と設定方法を説明します。

スマートフォンは、ディスプレイが小さいため元々文字を大きく表示する機能が備わっています。

スマートフォンのディスプレイが6インチ、パソコンのディスプレイが24インチだったとすると、同じ16pxの文字を表示したとしても1/4(縦も横も約1/4)のサイズしかありません。

しかし、この1/4は縦横で表示できるピクセル数が同じだった場合です。ピクセル数が低ければ、文字は大きく表示されます。

例えば、スマートフォンで実際に表示できるのが横1080pxだった場合、疑似的に414pxに変えると1pxの大きさが横に約2.6倍(= 1080px ÷ 414px)になります。実際に表示できるピクセル数はデバイスピクセルと呼ばれ、疑似的なピクセル数はCSSピクセルと呼ばれます。

つまり、スマートフォンでは横幅が1080px表示できる能力があっても、414pxと扱って表示するということです。仕様などに記載されているのは、1080pxなどのデバイスピクセルの方です。

実際のパソコンとスマートフォンで表示される文字に、デバイスピクセルの格子を付けると、以下のようになります。

パソコンでは16pxで表示されていますが、スマートフォンでは縦横ともに16pxを大きく超えるピクセル(デバイスピクセル)が使われています。これが、スマートフォンで認識している16px(CSSピクセル)です。

スマートフォンに対応していないWebページの横幅が980pxあったとします。スマートフォンで横幅414px(CSSピクセル)しか表示できないとすると、半分も表示できません。

このため、スマートフォンではビューポートを980pxなどとし、縮小してディスプレイに収まるように表示しています。

つまり、16pxの文字は半分以下に縮小されてしまいます。これが、文字が小さくなる原因です。

スマートフォンに対応しているWebページでは、横幅が980pxも必要ありません。スマートフォンの横幅に合わせて、ページの横幅が決まるためです。

このため、ビューポートの横幅が414pxであれば、文字も縮小されずに済みます。

ビューポートの横幅を414pxに設定するためには、HTMLのheadに以下を追加します。

【HTMLのviewport(414px)】

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

width=414が横幅(CSSピクセル)です。initial-scaleは、viewportの初期表示での拡大縮小を定義します。0.5であれば0.5倍、1.5であれば1.5倍になります。通常は1.0(拡大縮小しない)です。

ただし、スマートフォンの横幅は必ずしも414pxではありません。360pxや320pxなど、機種ごとに異なります。このため、通常は以下のように記述します。

【HTMLのviewport(device-width)】

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

上記は、機種ごとに異なる横幅にビューポートの横幅を合わせるという意味です。横幅が414pxの機種であればビューポートの横幅は414px、360pxの機種であれば360pxになります。

これで、ビューポートがスマートフォンで表示できる横幅と一致するため、縮小されずに表示できるようになります。また、CSSピクセルを使って表示するため、文字は大きく表示されます。

ビューポートでサポートされているプロパティは、以下のとおりです。

【ビューポートのプロパティ】
プロパティ	説明	範囲(iPhone)	デフォルト
width	横幅をCSSピクセルで指定します。device-widthを指定すると、機種に合ったサイズになります。	200〜10,000	980
height	高さをCSSピクセルで指定します。device-heightを指定すると、機種に合ったサイズになります。	223〜10,000	機種ごとにwidthから計算
initial-scale	初期表示での拡大・縮小を指定します。	minimum-scaleからmaximum-scaleの間	画面に収まるよう計算
minimum-scale	ピンチイン(2本の指でつまむ)した時に縮小可能な割合	0〜10.0	0.25
maximum-scale	ピンチアウト(2本の指で広げる)した時に拡大可能な割合	0〜10.0	5.0
user-scalable	ユーザがピンチイン・ピンチアウトできるかの指定	yes、またはno	yes

通常は、widthとinitial-scale以外は、指定しなくて良いと思います。