HTML5のmeta viewportパラメータの解析

モバイルの普及に伴い、モバイルでのリファクタリングやWebサイトの開発が急務となっています。しかし、モバイルデバイスのメタビューポートパラメータを理解して初めて、私たちのWebページをモバイルデバイスのさまざまな解像度にうまく適応させたり、レスポンシブ化したりすることができるのです。

ビューポートとは何ですか？平たく言うと、ビューポートとは、ユーザーのウェブページが見える範囲のことです。モバイル端末におけるビューポートは、端末の画面のうち、当社のウェブページを表示できる領域、具体的にはブラウザの表示部分のことですが、ビューポートはブラウザの表示領域の大きさに限らず、ブラウザの表示領域より大きくても小さくてもかまいません。

ビューポートの構文は以下の通りです。

<meta name="viewport"
　　content="
　　height = [pixel_value | device-height] ,
　　width = [pixel_value | device-width ] ,　
　　initial-scale = float_value ,
　　minimum-scale = float_value ,
　　maximum-scale = float_value ,
　　user-scalable = [yes | no] ,
　　target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi　
　　"　
　　/>

viewportのパラメータ詳細は以下の通りです。

幅を指定します。 ビューポートのサイズを制御します。指定された値として、またはデバイスの幅を表すdevice-widthのような特別な値として（CSSを100%に拡大したピクセル数で）指定されたものです。

の高さを指定します。 widthに対応し、heightを指定する。

初期スケール initial-scaling。つまり、ページが最初にどの程度拡大縮小されるかを示す。これは浮動小数点値で、ページサイズの乗数である。たとえば、初期スケールを「1.0」に設定すると、ウェブページは目標密度の解像度1:1で表示されます。2.0」に設定した場合は、ページが2倍に拡大されます。

最小スケール ユーザーがズームできる最小のスケール

最大スケール maximum-scaling。つまり、許容される拡大縮小の最大度合い。これも浮動小数点値で、画面サイズと比較したページサイズの最大倍率を示す。例えば、この値を "2.0 "に設定すると、ターゲットサイズと比較してページを最大2倍まで拡大することができる。

ユーザースケーラブルです。 ユーザーが調整可能な拡大縮小。つまり、ユーザがページのズームレベルを変更できるかどうかです。yesに設定すると、ユーザーが変更できるようになり、逆にnoに設定すると、スケーリングが全くできないため、minimum-scaleもmaximum-scaleも無視されることになる。

target-densitydpi。 画面のピクセル密度は、画面の解像度によって決定され、通常は1インチあたりのドット数（dpi）として定義されます。アンドロイドは、低ピクセル密度、中ピクセル密度、高ピクセル密度の3つの画面ピクセル密度をサポートしています。低ピクセル密度の画面は1インチあたりのドット数が少なく、高ピクセル密度の画面は1インチあたりのドット数が多くなります。Android BrowserとWebViewのデフォルト画面は、中ピクセル密度です。

ここで、target-densitydpiは、以下の範囲の値をとります。

device-dpi。 ターゲットdpとしてデバイスのオリジナルのdpiを使用します。デフォルトのスケーリングは行われません。

high-dpi。 ターゲットdpiとしてhdpiを使用し、中・低画素密度のデバイスはそれに応じて縮小されます。

medium-dpi。 高ピクセル密度のデバイスはそれに応じてスケールアップされ、ピクセル密度のデバイスはそれに応じてスケールダウンされます。これはデフォルトのターゲット密度です。

low-dpiです。 mdpiをターゲットdpiとし、中画素密度、高画素密度のデバイスはそれに応じてスケールアップされます。

値を設定します。 ターゲットdpiとして特定のdpi値を指定します。この値は70-400の範囲である必要があります。

Android BrowserとWebViewが、異なるスクリーンのピクセル密度に基づいてページを拡大縮小するのを防ぐために、ビューポートのtarget-densitydpiをdevice-dpiに設定することができます。その代わり、現在の画面のピクセル密度に従ってページが表示されます。この場合、ページが画面に収まるように、ビューポートの幅をデバイスの幅に合わせて定義する必要があります。

例えば

画面の幅をデバイスの幅に設定し、ユーザーが手動で拡大縮小を調整できないようにする。

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

画面の密度を高・中・低周波の自動スケーリングに設定し、ユーザーが手動でスケーリングを調整することを禁止する。

<meta name="viewport" content="width=device-width,
　　target-densitydpi=high-dpi,
　　initial-scale=1.0,
　　minimum-scale=1.0,
　　maximum-scale=1.0,
　　user-scalable=no"/>

上記は、HTML5メタビューポートパラメータの詳細な分析であり、HTML5メタビューポートパラメータの詳細については、スクリプトの家の他の関連記事に注意を払うしてください！.