html5 でのビューポートの使用方法development_html/css_WEB-ITnose

転載元：http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html

ハイエンド携帯電話（Andriod、Iphone、iPod、WinPhoneなど）の普及に伴い、 )、モバイル インターネット アプリケーションの開発 モバイル アプリケーションの開発に HTML5 を使用することは、人々からますます注目を集めています。しかし、携帯電話ごとに解像度や画面サイズが異なります。開発するアプリケーションやページサイズをさまざまなハイエンド携帯電話に適したものにするにはどうすればよいでしょうか。

HTML5 ビューポートの使用方法を学ぶと、これを行うのに役立ちます...

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

01

02

03

Content="

0 4	高さ = [ピクセル値 | デバイスの高さ] ,

05	‐ アウトスルー = float_value ,

07	minimum-scale = float_value ,

08	最大スケール = float_value 、

09	ユーザースケーラブル = [はい | いいえ] 、

10 target-densitydpi = [デバイス-dpi | 高 dpi |

11 "

12

/>

1. 幅を設定します

ビューポートのサイズを制御します。値または特別な値を指定できます。たとえば、device-width はデバイスの幅です (スケーリングが 100% の場合の単位は CSS ピクセルです)。

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

3. ピクセル密度 target-densitydpi

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

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

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

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

? この値の範囲は 70 ～ 400 である必要があります。

1

2

3

4

< name="viewport" content="target-densitydpi=medium-dpi" />

5

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

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

5. 最大ズーム 最大スケール

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

6. ユーザーがユーザースケーラブルなズームを許可するかどうか。

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

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

例:

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

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