Jan. 27th,2019
ビューポートとは何か
モバイルブラウザのビューポート
デスクトップブラウザで“ビューポートの大きさ”といえば単純にブラウザのウィンドウからブラウザのインターフェースを除いたウェブサイトが表示される部分のことであり、あまり深く考える必要はありませんが、モバイルブラウザでは異なります。
以前はウェブサイトを見る手段といえばパソコンのみで、ブラウザはウェブサイトを等倍で表示すれば問題なく見ることができました。しかし、スマートフォンやタブレットが登場するとパソコンよりも画面の大きさが小さいこれらのデバイスでウェブサイトを見ることが多くなりました。この時一般的だったスマートフォン向けにデザインされていない幅が固定されたウェブサイトはスマートフォンの小さい画面でも同じように等倍で表示するとごく一部がだけが表示されて見づらくなってしまいます。
そこで、モバイルブラウザでもデスクトップブラウザで見ているかのようにウェブページを表示できるように、“ビューポート”の大きさとして実際の画面の大きさよりも大きいデスクトップブラウザのような横幅を設定してウェブサイトを等倍よりも縮小して表示するようになりました。
ここで、画面の大きさの測り方にはデバイスピクセルとCSSピクセルの2種類あります。デバイスピクセルはディスプレイに実際にある画素の数で、1080×1920や4Kのディスプレイだと2160×3840のような数値になります。CSSピクセルは画素密度が高いディスプレイで1ピクセルを画素1個で表現すると画像が小さくなりすぎるのを防ぐために設定されている“仮想”のピクセル数で、4Kの高精細なディスプレイを搭載したデバイスでも360×640のような比較的小さな数値になります。
ビューポートの大きさはデバイスピクセルではなく、CSSピクセルで設定されます。一般的に980pxがビューポートの横幅の既定値として設定されており、ウェブサイトは横幅980pxで描画されてから実際のブラウザの領域に合うように表示されます。
ビューポートを設定する
実際より大きな表示領域があるかのように見せるモバイルブラウザのビューポートの仕組みはデスクトップブラウザ向けのウェブページを見る上では問題になりませんでしたが、このままではレスポンシブなウェブサイトなどのスマートフォン向けにデザインされたウェブサイトも縮小されて表示されてしまいます。ここで、ビューポートの大きさを設定する必要が出てきます。
ビューポートの設定はHTMLの“meta”要素で行うことができます。
“meta”要素でビューポートを設定する
“meta”要素と“name="viewport"”
“meta”要素はHTML文書のメタデータを示すための要素で、ビューポートを設定するために使用することもできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプルのページ</title>
</head>
<body>
...
“meta”要素の“name”属性に“viewport”を指定し、“content”属性の値としてビューポートの設定を記述します。
ビューポートの設定はいくつかのプロパティとイコール(“=”)を挟んで記述した値として記述します。複数のプロパティを使用する場合はコンマ(“,”)で区切って記述します。
以下は指定できるプロパティと値の一覧です。
| プロパティ | 値 | ||
|---|---|---|---|
| プロパティ | 説明 | 値 | 説明 |
| width | ビューポートの横幅を指定 | device-width | ビューポートの横幅はデバイスの描画域の横幅 |
| 数値 | ビューポートの横幅のピクセル数 | ||
| height | ビューポートの高さを指定 | device-height | ビューポートの高さはデバイスの描画域の高さ |
| 数値 | ビューポートの高さのピクセル数 | ||
| initial-scale | ズームの初期倍率を指定 | 数値 | “0.0”から“10.0”までの数値 |
| maximum-scale | ズームの最大倍率を指定 | 数値 | “0.0”から“10.0”までの数値 |
| minimum-scale | ズームの最小倍率を指定 | 数値 | “0.0”から“10.0”までの数値 |
| user-scalable | ズームできるかを指定 | yes | ユーザーがズームできる |
| no | ユーザーがズームできない | ||
この指定方法はHTMLの仕様書で定義、標準化されているものではありませんが、ほとんどのモバイルブラウザーが対応しています。ただし、デバイスやブラウザーによっては異なる働きをすることがあります。
通常この指定はデスクトップブラウザでは無視されます。
“width”プロパティ
概要
“width”プロパティはビューポートの横幅を指定します。値はピクセル値の整数値もしくはデバイスの描画域の横幅に合わせる“device-width”を指定できます。
ピクセル値で指定した場合、値がデバイスの描画域の横幅と異なる時はウェブページは指定した横幅で一度描画されたあとデバイスの描画域の横幅に合わせて縮小もしくは拡大されて表示されます。
指定できる値
| 値 | 説明 |
|---|---|
| device-width | ビューポートの横幅はデバイスの描画域の横幅 |
| 数値 | ビューポートの横幅のピクセル数 |
サンプルコード
320pxに指定する
<meta name="viewport" content="width=320">
デバイスの描画域に合わせる
<meta name="viewport" content="width=device-width">
“height”プロパティ
概要
“height”プロパティはビューポートの高さを指定します。値はピクセル値の整数値もしくはデバイスの描画域の高さに合わせる“device-height”を指定できます。
ピクセル値で指定した場合、値がデバイスの描画域の高さと異なる時はウェブページは指定した高さで一度描画されたあとデバイスの描画域の高さに合わせて縮小もしくは拡大されて表示されます。
縦にスクロールする形式の一般的なウェブページではこの設定をする必要はありません。
指定できる値
| 値 | 説明 |
|---|---|
| device-height | ビューポートの高さはデバイスの描画域の高さ |
| 数値 | ビューポートの高さのピクセル数 |
サンプルコード
640pxに指定する
<meta name="viewport" content="height=640">
デバイスの描画域に合わせる
<meta name="viewport" content="height=device-height">
“maximum-scale”プロパティ
概要
“maximum-scale”プロパティはズームの最大倍率を指定します。値は“0.0”から“10.0”までの数値で指定します。値は“minimum-scale”の値と同じかそれより大きい必要があります。
ブラウザによってはこの指定を無視します。
指定できる値
| 値 | 説明 |
|---|---|
| 数値 | “0.0”から“10.0”までの数値 |
サンプルコード
<meta name="viewport" content="maximum-scale=6.0">
“minimum-scale”プロパティ
概要
“minimum-scale”プロパティはズームの最小倍率を指定します。値は“0.0”から“10.0”までの数値で指定します。値は“maximum-scale”の値と同じかそれより小さい必要があります。
ブラウザによってはこの指定を無視します。
指定できる値
| 値 | 説明 |
|---|---|
| 数値 | “0.0”から“10.0”までの数値 |
サンプルコード
<meta name="viewport" content="minimum-scale=0.5">
