このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

“ビューポート”とは?スマートフォン向けのウェブページでビューポートを設定する

記事Jan. 27th,2019
スマートフォン向けのウェブサイトで必要なビューポートの設定方法について。

ビューポートとは何か

“ビューポート”とは?

ビューポート”とはウェブページを表示するための領域のことで、一般的なウェブブラウザではブラウザのウインドウからアドレスバーやタブなどのブラウザのインターフェースを除いた部分のことを指します。

デスクトップブラウザのビューポート
デスクトップブラウザのビューポート
モバイルブラウザのビューポート
モバイルブラウザのビューポート

ビューポートはウェブページを見るための覗き窓のようなもので、ウェブページがビューポートよりも大きい場合はビューポートからはみ出した部分はスクロールなどによってウェブページを動かさないと表示されません。

ビューポートから見える部分のイメージ
ビューポートから見える部分のイメージ

モバイルブラウザのビューポート

デスクトップブラウザでは“ビューポートの大きさ”といえば単純にブラウザのウィンドウからブラウザのインターフェースを除いた部分の大きさですが、モバイルブラウザでは異なります。

以前はウェブサイトを見る手段といえばパソコンのみで、ウェブサイトは等倍でブラウザに表示されれば問題なく見ることができました。しかし、スマートフォンやタブレットが登場するとそれらでウェブサイトを見ることも多くなります。当初はスマートフォン向けにデザインされたウェブサイトは少なかったので、デスクトップブラウザ向けのウェブサイトをスマートフォンの小さい画面でも表示する必要がありましたが、今までのように等倍でウェブサイトを表示すると左上の一部がだけが表示されて見づらくなってしまいます。

パソコン向けのウェブページをそのままスマートフォンで表示したイメージ
パソコン向けのウェブページをそのままスマートフォンで表示したイメージ

ここで、モバイルブラウザでもデスクトップブラウザで見ているかのようにウェブページを表示するためにモバイルブラウザではビューポートがデスクトップブラウザと同じような大きさがあるかのように表示するようになっています。

そもそも画面の大きさには2種類あり、一つは画面の実際の画素の数であるデバイスピクセルと、擬似的なピクセル数であるCSSピクセルです。例えば、デバイスピクセルでの大きさが1080×1920のデバイスでCSSピクセルでの大きさは414×736といったように、画面のCSSピクセルでの大きさはデバイスごとに設定されています。

ビューポートの大きさはCSSピクセルで設定されており、ブラウザによって異なりますが、例えば横幅980pxといった大きさが既定値として設定されています。ウェブページはこの大きさで描画されてから実際の画面の大きさに合うように縮小して表示されます。

ビューポートの大きさのイメージ
ビューポートの大きさのイメージ

ビューポートを設定する

実際より大きな表示領域があるかのように見せるモバイルブラウザのビューポートの仕組みはデスクトップブラウザ向けのウェブページを見る上では問題になりませんでしたが、このままではレスポンシブなウェブサイトなどのスマートフォン向けにデザインされたウェブサイトも縮小されて表示されてしまいます。ここで、ビューポートの大きさを設定する必要が出てきます。

ビューポートの設定のイメージ
ビューポートの設定のイメージ

ビューポートの設定はHTMLのmeta”要素で行うことができます。

meta”要素でビューポートを設定する

meta”要素と“name="viewport"

meta”要素はHTML文書のメタデータを示すための要素で、一般的にスマートフォンなどのモバイルブラウザでの閲覧に対応するウェブサイトはmeta”要素でビューポートの設定をしています。

meta”要素name”属性には“viewport”を指定し、content”属性にビューポートの設定を記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプルのページ</title>
</head>
<body>
...

以下は指定できる値の一覧です。

設定可能な値
説明 説明
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">

initial-scale”値

概要

initial-scale”値はビューポートを実際の画面の何倍の大きさと見なすかを指定します。値は“0.0”から“10.0”までの数値で指定します。

この倍率はユーザーがズームなどの機能を使用する前の初期倍率になります。

1.0”とするとビューポートは実際のデバイスの描画域の大きさと同じになり、ウェブページは等倍で表示されます。

指定できる値

説明
数値 0.0”から“10.0”までの数値

サンプルコード

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

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">

user-scalable”値

概要

user-scalable”はユーザーがウェブページをズームできるかを指定します。値は“yes”か“no”で指定します。

user-scalable”の指定をしない場合は“yes”とみなされます。

ブラウザによってはこの指定を無視します。

指定できる値

説明
yes ユーザーがズームできる
no ユーザーがズームできない

サンプルコード

<meta name="viewport" content="user-scalable=no">
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket