コメント:ハイエンドの携帯電話(Andriod、iPhone、iPod、WinPhoneなど)の人気により、モバイルインターネットアプリケーション開発も人々からますます注目を集めています。 HTML5を使用してモバイルアプリケーションを開発することが最良の選択です。ただし、各携帯電話には異なる解像度と画面サイズがあります。開発したアプリケーションまたはページサイズは、さまざまなハイエンド携帯電話での使用に適していますか? HTML5ビューポートを学びます
ViewPort構文の紹介:
<! - html document - >
<Meta name = ViewPort
content =
height = [pixel_value | Device-height]、
width = [pixel_value |デバイスの幅]、
初期スケール= float_value、
最小スケール= float_value、
最大スケール= float_value、
user-scalable = [yes |いいえ] 、
Target-dencessdpi = [dpi_value | device-dpi | high-dpi |中dpi |低DPI]
/>
パラメーター説明:
幅
- ビューポートのサイズをコントロールします。これは、デバイスの幅であるデバイスの幅などの値または特別な値として指定できます。
身長
- 幅に対応し、高さを指定します。
Target-DensityDPI
- 画面ピクセルの密度は、画面解像度によって決定され、通常はインチあたりのドット数(DPI)として定義されます。 Androidは、低ピクセル密度、中ピクセル密度、高ピクセル密度の3つのスクリーンピクセル密度をサポートします。低ピクセル密度スクリーンのピクセルあたりのピクセルは少なく、ピクセル密度の高い画面には1インチあたりのピクセルが多くなります。 AndroidブラウザとWebViewのデフォルトでは中程度のピクセル密度があります。
以下は、Target-DencessDPI属性の値範囲です
Device-DPI:デバイスの元のDPIをターゲットDPとして使用します。デフォルトのズームは発生しません。
High-DPI:HDPIをターゲットDPIとして使用します。それに応じて、中程度および低ピクセル密度デバイスが減少します。
中DPI:MDPIをターゲットDPIとして使用します。それに応じて高ピクセル密度デバイスが拡大し、それに応じてピクセル密度デバイスが縮小されます。これがデフォルトのターゲット密度です。
低DPI:MDPIをターゲットDPIとして使用します。それに応じて、中程度および高ピクセル密度デバイスが増幅されます。
<値>:特定のDPI値をターゲットDPIとして指定します。この値の範囲は70〜400でなければなりません。
<! - html document - >
<Meta name = viewport content = target-dencesdpi = device-dpi />
<Meta name = viewport content = target-dencesdpi = high-dpi />
<Meta name = viewport content = target-densitydpi = midd-dpi />
<Meta name = viewport content = target-densitydpi = low-dpi />
<Meta name = viewport content = target-dencesdpi = 200″ />
AndroidブラウザとWebViewが異なる画面のピクセル密度に基づいてページをスケーリングするのを防ぐために、ViewPortのターゲットデシデンDPIをDevice-DPIに設定できます。これを行うと、ページはスケーリングされません。代わりに、ページは現在の画面のピクセル密度に基づいて表示されます。この場合、ページが画面に適応できるように、デバイスの幅に一致するようにビューポートの幅を定義する必要があります。
初期スケール
——Initial Scaling。つまり、ページの初期ズームレベルです。これは、ページサイズの乗数である浮動小数点値です。たとえば、初期スケーリングを1.0に設定すると、Webページがターゲット密度の1:1解像度で表示されます。 2.0に設定すると、このページは2倍に拡大されます。
最大スケール
——maximum Zoom。これが最大許可されたスケーリングの程度です。これは、画面サイズと比較してページサイズの最大乗数を示す浮動小数点値でもあります。たとえば、この値を2.0に設定すると、このページはターゲットサイズと比較して最大2回拡大できます。
ユーザースケーラブル
- ユーザーはズームを調整します。つまり、ユーザーがページズームレベルを変更できるかどうか。はいに設定されている場合、ユーザーはそれを変更することを許可します、そうでなければそれはノーです。デフォルト値はイエスです。ノーに設定すると、スケーリングが単に不可能であるため、最小スケールと最大スケールの両方が無視されます。
すべてのスケーリング値は、0.01〜10の範囲内でなければなりません。
例:1。画面幅をデバイスの幅に設定し、ユーザーがズームを手動で調整することを禁止します
<Meta name = viewport content = width = device-width、user-scalable = no />
2.画面密度を高周波、中周波数、低周波数の自動スケーリングに設定し、ユーザーがスケーリングの手動で調整することを禁止します
<Meta name = viewport content = width = device-width、target-dencessdpi = high-dpi、hight scale = 1.0、minimut-scale = 1.0、maximing-scale = 1.0、user-scalable = no/>