html5ビューポートの使用例を詳しく解説_html5チュートリアルスキル

ビューポート構文概要:

パラメータの説明:

width
- ビューポートのサイズを制御します。たとえば、device-width はデバイスの幅です (100% に拡大縮小する場合の単位は CSS ピクセルです)。 。

height
- 幅に対応し、高さを指定します。

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

以下は、target-densitydpi 属性の値の範囲です。
device-dpi: デバイスの元の dpi をターゲット dp として使用します。 デフォルトのスケーリングは行われません。
高 dpi: ターゲット dpi として hdpi を使用します。 中ピクセル密度および低ピクセル密度のデバイスは、それに応じてスケールダウンされます。
medium-dpi: ターゲット dpi として mdpi を使用します。 ピクセル密度の高いデバイスはそれに応じてスケールアップし、ピクセル密度のデバイスはそれに応じてスケールダウンします。 これはデフォルトのターゲット密度です。
low-dpi: ターゲット dpi として mdpi を使用します。中ピクセル密度および高ピクセル密度のデバイスは、それに応じてスケールアップします。
: ターゲット dpi として特定の dpi 値を指定します。この値は 70 ～ 400 の範囲である必要があります。

Android ブラウザと WebView がさまざまな画面のピクセル密度に基づいてページを拡大縮小しないようにするには、ビューポートの target-densitydpi を device-dpi に設定します。これを行うと、ページは拡大縮小されません。代わりに、ページは現在の画面のピクセル密度に基づいて表示されます。この場合、ページが画面に収まるように、デバイスの幅に合わせてビューポートの幅を定義する必要もあります。

initial-scale
—初期スケーリング。つまり、ページの初期ズーム レベルです。これは、ページ サイズの乗数である浮動小数点値です。たとえば、初期スケーリングを「1.0」に設定すると、Web ページは表示時にターゲット密度解像度の 1:1 で表示されます。 「2.0」に設定すると、ページが2倍に拡大されます。

maximum-scale
——最大スケーリング。つまり、許可されるスケーリングの最大度です。これは、画面サイズと比較したページ サイズの最大乗数を示す浮動小数点値でもあります。たとえば、この値を「2.0」に設定すると、ページを目標サイズと比較して最大 2 倍に拡大できます。

ユーザーがスケーラブル
—ユーザーが調整可能なスケーリング。つまり、ユーザーがページのズーム レベルを変更できるかどうかです。 「yes」に設定すると、ユーザーは変更を許可されます。それ以外の場合は「no」です。デフォルト値は「はい」です。これを no に設定すると、スケーリングはまったく不可能になるため、minimum-scale と minimum-scale の両方が無視されます。

すべてのスケーリング値は 0.01 ～ 10 の範囲内である必要があります。

例: 1. 画面の幅をデバイスの幅に設定し、ユーザーが手動でズームを調整することを禁止します

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