html5 開発でのビューポートの使用_html5 チュートリアルのスキル-H5 チュートリアル-php.cn

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

コードをコピー コードは次のとおりです: コンテンツ = 高さ = [ピクセル値 | デバイスの高さ] 、 幅 = [ピクセル値 | デバイスの幅 ] 、 初期スケール = float_value 、 最小スケール = float_value 、 最大スケール = float_value 、 ユーザー スケーラブル = [はい | いいえ] 、 ターゲット密度 = [dpi_value | dpi | 高 dpi | 低 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 – mdpi をターゲット dpi として使用します。 ピクセル密度の高いデバイスはそれに応じてスケールアップし、ピクセル密度のデバイスはそれに応じてスケールダウンします。 これはデフォルトのターゲット密度です。 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 の範囲内である必要があります。

例:

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

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