HTML5 のビューポートのパラメーターとその使用方法の紹介

インターネットの発展はますます加速しており、さまざまなテクノロジーが次々と登場しており、さまざまなデバイスのディスプレイサイズや解像度も異なります。さまざまなインターフェイス上でわかりやすく表示します。

幸いなことに、ビューポートがHTML5に表示されます!ビューポートの登場により、私たちが開発したアプリケーションやページを、さまざまなサイズのデバイス上で均一かつわかりやすく表示できるようになりました。

viewport構文の紹介:

<!– html document –>
 <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]
”
/>

パラメータの説明:

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: mdpi をターゲット dpi として使用します。中ピクセル密度および高ピクセル密度のデバイスは、それに応じてスケールアップします。

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

<!– html document –>
 <meta name=”viewport” content=”target-densitydpi=device-dpi” />
 <meta name=”viewport” content=”target-densitydpi=high-dpi” />
 <meta name=”viewport” content=”target-densitydpi=medium-dpi” />
 <meta name=”viewport” content=”target-densitydpi=low-dpi” />
 <meta name=”viewport” content=”target-densitydpi=200″ />

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

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

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

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

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

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

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

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

<meta name=”viewport” content=”width=device-width,target-densitydpi=high-dpi,initial-scale=1.0

[関連する推奨事項]

1. 特別な推奨事項: 「php Programmer Toolbox」V0.1 バージョンのダウンロード

2. ビューポートの互換性の問題に関するサンプルコード

3

ビューポート特別トピック: CSS でのレスポンシブ Web デザインの詳細 - ビューポート

4. モバイル端末で縦画面から横画面に切り替えるときにフォントがリセットされる問題を解決するためにビューポート属性を共有します

以上がHTML5 のビューポートのパラメーターとその使用方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。