html 5携帯端末画面スケールラベルviewport

ハイエンド携帯電話(Andriod,Iphone,Ipod,WinPhoneなど)が盛んになるにつれて、モバイル相互接続アプリケーションの開発もますます重視され、html 5でモバイルアプリケーションを開発するのが最善の選択です.しかし、各携帯電話には異なる解像度、異なる画面サイズがあり、どのようにして私たちが開発したアプリケーションやページサイズが様々なハイエンド携帯電話に適しているのでしょうか.html 5 viewportの使い方を学ぶとそれができます......viewport文法の紹介:

01  <!-- html document -->
02  <meta name="viewport" 03 content=" 04 height = [pixel_value | device-height] , 05 width = [pixel_value | device-width ] , 06 initial-scale = float_value , 07 minimum-scale = float_value , 08 maximum-scale = float_value , 09 user-scalable = [yes | no] , 10 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 11 " 12 />

widthはviewportのサイズを制御し、device-widthがデバイスの幅(単位が100%にスケールされたときのCSSの画素)など、指定できる値または特殊な値を指定します.
heightはwidthに対応し、高さを指定します.
target-densitydpi 1画面の画素密度は、画面解像度によって決定され、通常、1インチあたりの数(dpi)として定義される.Androidは、低ピクセル密度、中ピクセル密度、高ピクセル密度の3つのスクリーンピクセル密度をサポートします.低画素密度のスクリーンは1インチあたりの画素点が少なく、高画素密度のスクリーンは1インチあたりの画素点が多い.Android BrowserとWebViewのデフォルト画面は中画素密度です.
次はtarget-densitydpiプロパティの値範囲です.
デバイス-dpi–デバイスの元のdpiをターゲットdpとして使用します.既定のスケールは発生しません.high-dpi–ターゲットdpiとしてhdpiを使用します.中画素密度および低画素密度デバイスは、それに応じて縮小される.medium-dpi–ターゲットdpiとしてmdpiを使用します.高画素密度装置はそれに応じて増幅され、画素密度装置はそれに応じて縮小される.これはデフォルトのtarget densityです.low−dpi−ターゲットdpiとしてmdpiを用いる.中程度のピクセル密度と高ピクセル密度のデバイスは、それに応じて増幅されます.–具体的なdpi値をtarget 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 BrowserとWebViewが異なる画面のピクセル密度に基づいてページをスケールしないようにするには、viewportのtarget-densitydpiをdevice-dpiに設定します.そうすると、ページはスケールされません.逆に、ページは現在の画面のピクセル密度に基づいて表示されます.この場合、viewportのwidthをデバイスのwidthと一致するように定義する必要があります.これにより、ページが画面に適応できます.
initial-scale初期スケール.つまり、ページの初期スケールの度合いです.これは浮動小数点値で、ページサイズの乗数です.たとえば、初期スケールを1.0に設定すると、Webページはtarget density解像度の1:1で表示されます.「2.0」に設定すると、このページは2倍に拡大されます.
maximum-scale最大スケール.つまり、最大スケールが許可されます.これも浮動小数点値で、ページサイズが画面サイズに比べて最大乗数であることを示します.たとえば、この値を「2.0」に設定すると、このページはtarget sizeに比べて最大2倍に拡大できます.
user-scalableユーザーはスケールを調整します.すなわち、ユーザがページのスケールを変更できるかどうか.yesに設定すると、ユーザーが変更できるようにします.逆にnoです.デフォルトはyesです.これをnoに設定すると、minimum-scaleとmaximum-scaleはスケールできないため無視されます.
すべてのスケール値は0.01～10の範囲でなければなりません.
例:
(画面幅をデバイス幅に設定し、ユーザーが手動でスケールを調整することを禁止)

 <meta name="viewport" content="width=device-width,user-scalable=no" />

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

<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>