モバイル端末開発の必須知識（再版）_html/css_WEB-ITnose

1: 基本概念

( 1 ) CSS ピクセルとデバイス ピクセル

CSS ピクセル:

デバイス ピクセル:

( 2 )

PPI/DPI : 1 インチあたりのピクセル数。値が大きいほど、ディスプレイで表示できる密度が高くなります。

PPI 計算:

最初に携帯電話の画面の対角線に相当するピクセルを計算し、次に対角線で割ります (通常、携帯電話の画面サイズと呼ばれるものは、携帯電話の画面を指します)対角長)

(3)PPI密度が比率を決定

120-160: 低密度携帯電話

160-240: 中密度

240-320: 高密度

320以上: 超高密度 (網膜)

ここで重要な質問が来ます:

320px のページを 4 秒と 4 秒で表示すると、全幅であることがわかります。

原因: ページはデフォルトで 2 倍に拡大され、640px、4 と 4s の幅は正式には 640px です

(4) ビューポートの使用

content= "

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

幅=[ピクセル値 | 幅-高さ],

初期スケール = float_value 、最小スケール = float_value 、最大スケール = float_value 、

user-scalable =[yes no] ,

target-densitydpi = [dpi_value | low-dpi] " />

これらの属性の中で、 densitydpi、このプロパティはデバイスのデフォルトのスケーリングを変更します。

medium-dpi は target-densitydpi=device を明示的に定義すると、デバイスは実際の dpi に従ってページをレンダリングします。たとえば、320*480 の画像を iPhone 4 に配置すると、デフォルトで画面いっぱいに表示されますが、target-densitydpi=device-dpi が定義されている場合、画像は画面の 4 分の 1 (半分) しか占めません。 iPhone4 の解像度は 640*960 です。

2: 解決策

(1) シンプルで粗雑

幅 320px のデザイン案に従ってページを作成し、何も設定しないと、ページは自動的にモバイルと同じ幅に拡大縮小されますデフォルトの電話画面 (これは、medium-dpi が target-densitydpi のデフォルト値であり、異なる密度に対応する異なるスケーリング比によって決定されるためです。これはすべて、モバイル デバイスによって自動的に行われます)。したがって、この解決策はシンプルで粗雑ですが効果的です。ただし、高パスワードや超高パスワードを使用するモバイル デバイスの場合、ページ (特に画像) が歪んでしまい、密度が高くなるほど歪みが大きくなります。

(2) 非常に完璧です

このソリューションでは、

target-densitydpi = device-dpi を使用するため、モバイル デバイスは専門用語で言えば 1 CSS ピクセルである実際のピクセル ツリーに従ってレンダリングされます。 = 1 デバイスピクセル。たとえば、640*960 の iPhone の場合、640*960 のページを作成できますが、iPhone に表示されるときにスクロール バーは表示されません。もちろん、他のデバイスの場合は、さまざまなサイズのページも作成する必要があります。このようなソリューションでは、多くの場合、

メディア クエリを使用してレスポンシブなページを作成します。このソリューションは特定の解像度で完全にレンダリングできますが、互換性を持たせる必要があるさまざまな解像度が増えるほど、解像度ごとに個別のコードを記述する必要があるため、コストが高くなります。

 1 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" / > 2 #header{  3 background:url(medium-density-image.png);  4 }  5 @media screen and (-webkit-device-pixed-ratio:1.5){  6 /* CSS for high-density screens */  7 #header { background:url (high-density-image.png);}  8 }  9 @media screen and (- webkit -device-pixel-ratio:0.75) { 10 /* CSS for low-density screens */ 11 #header { background:url (low-density-image.png);} 12 }

( 3 ) 合理的な妥協点

ほとんどの Android デバイスが高密度で、一部が中密度であることを考慮すると、この解決策を採用できます。幅 480 ピクセルのデザイン ドラフトを復元しますが、ページは 320 ピクセルになります。 Wide (画像を縮小するには、background-size を使用します) と、ページは比率に従って自動的に拡大縮小されます。このように、低密度の携帯電話にはスクロール バーがあり (基本的に、この種の携帯電話はもう誰も使用していません)、中密度の携帯電話では少量のデータが無駄になりますが、高密度の携帯電話では完全に表示され、超高密度の携帯電話にはわずかな歪みがあります (超高密度の Android スマートフォンはほとんどありません)。このソリューションの利点は非常に明白です。必要なのは 1 セットのデザイン ドラフトと 1 セットのコードだけです (ここでは Android スマートフォンの状況についてのみ説明します)

この記事を読んで、いくつかの基本的な内容を理解するのに非常に役立ちました。概念を理解した後、将来他の人に説明するときに使用できる可能性があります。このブログには、リストされていない開発とデバッグに関するコンテンツもあります。 http: //blog.jobbole.com/31023 /

私はフロントエンド開発の経験がなく、最初の会社は非常に多くのモバイルプロジェクトを抱えている会社なので、基本的には今後も同様のことが間違いなくたくさんあります。残念ながら私のブログに来てくれた友人は、私とコミュニケーションを取ることを歓迎します。ご覧のとおり、ここには価値のあるものは何もありません。将来的には間違いなく私を追加してください: 11580563。コミュニケーションを取る