HTML5開発におけるビューポート画面の適応

ハイエンド携帯電話 (Andriod、Iphone、iPod、WinPhone など) の人気に伴い、モバイル インターネット アプリケーションの開発はますます注目を集めています。モバイル アプリケーションの開発には html5 を使用することが最良の選択です。しかし、携帯電話ごとに解像度や画面サイズが異なります。開発するアプリケーションやページサイズをさまざまなハイエンド携帯電話に適したものにするにはどうすればよいでしょうか。 HTML5 ビューポートの使用法を学ぶと、これを行うのに役立ちます...

ビューポート構文の概要:

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

はwidthに相当し、高さを指定します。

target-densitydpi

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

以下は、target-densitydpi 属性の値の範囲です

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

• high-dpi – ターゲット dpi として HDPI を使用します。 中ピクセル密度および低ピクセル密度のデバイスは、それに応じてスケールダウンされます。

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

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

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

1	<!-- html document -->
2	<meta name="viewport" content="target-densitydpi=device-dpi" />
3	<meta name="viewport" content="target-densitydpi=high-dpi" />
4	<meta name="viewport" content="target-densitydpi=medium-dpi" />
5	<meta name="viewport" content="target-densitydpi=low-dpi" />
6	<meta name="viewport" content="target-densitydpi=200" />

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

初期スケール

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

最大スケール

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

ユーザースケーラブル

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

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

例:

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

d613e7d2aaeb7433107e152201403a12

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

以上がHTML5開発におけるビューポート画面の適応の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。