モバイル端末におけるhtml5の画面適応問題例についての考察_html5チュートリアルスキル

HTML5 はかつて最も注目されているテクノロジであり、HTML5 テクノロジの追加によりモバイル端末はより柔軟になりました。誰もが「一度書いたら、もっと実行する」ことを好みますが、今年はザッカーバーグ氏が HTML5 で間違いを犯したことを認めたため、私たちはそうすべきです。また、新興テクノロジーとしての HTML5 には、まだ多くの欠陥があり、HTML5 の効率性など、多くのプログラマーが文句を言うことができず、消費者も耐えられないことになることを明確に認識する必要があります。しかし、HTML5 が優れた Web テクノロジをもたらしたことは否定できません。これは将来の開発のトレンドであり、私たちができることは、HTML5 を改善し、より優れたより効率的なコードを作成するために努力することです。

さて、くだらない話をしたところで、アンドロイドの適応問題はアンドロイドプログラマにとって最も厄介な問題であり、そのために皆が海を渡って魔法の力を発揮しているのですが。ここ HTML5 では、この問題をより適切に解決できます。モバイル ブラウザは、ページを仮想「ウィンドウ」(ビューポート) に配置します。通常、この仮想「ウィンドウ」(ビューポート) は画面よりも広いため、各 Web ページを小さなウィンドウに押し込む必要はありません (これにより、モバイル ブラウザー用に最適化されていない Web ページのレイアウトなど）、ユーザーはパンやズームを行って Web ページのさまざまな部分を表示できます。一般的に使用されるビューポートのレイアウトは次のとおりです:

具体的な意味は次のとおりです:
width: ビューポートの制御サイズは、600 などの値、またはデバイスの幅である device-width などの特別な値で指定できます (100% に拡大縮小する場合の単位は CSS ピクセルです)。デフォルトの仮想ウィンドウは 980 ピクセルです。幅 (現在、一部の Web サイトの最大の標準幅) に設定し、特定の比率 (3:1 または 2:1) に従って拡大縮小します。

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: 初期スケーリング率、つまりページが初めてロードされたときのスケーリング率です。
maximum-scale: ユーザーがズームできる最大スケール (0 ～ 10.0 の範囲)。
minimum-scale: ユーザーがズームできる最小スケール (0 ～ 10.0 の範囲)。
user-scalable: ユーザーが手動でズームできるかどうか、値は次のとおりです: ①yes、true はユーザーにズームを許可します。 ②no、false はユーザーにズームを許可しません。no に設定すると、最小スケールと最大スケールになります。スケーリングはまったくできないため、-scale は無視されます。

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

これらの属性を設定し、携帯電話の画面に適応させるために html5 のメタ属性に入れます。例:

コードをコピー

コードは次のとおりです:

[mw_shl_code=xhtml,true]content="
高さ = [ピクセル値 | デバイスの高さ] 、
幅 = [ピクセル値 | デバイス- width ] 、
initial-scale = float_value、
minimum-scale = float_value、
maximum-scale = float_value、
user-scalable = [はい、いいえ]、
ターゲット密度 dpi = [dpi_value | high-dpi | low-dpi]
"
/>[/mw_shl_code]

以下は、実際の使用例です。 :

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

コードをコピー

コードは次のとおりです。

>
(設定画面の濃度は高周波、中周波、低周波ごとに自動的にスケーリングされ、ユーザーがスケーリングを手動で調整することは禁止されています)

コードをコピーしますコードは次のとおりです: