webapp size_html/css_WEB-ITnose

1. ビューポートの幅

起源: PC 側の Web サイトがモバイル側で表示される場合、どのような問題がありますか?

モバイル端末の領域を(320-768)に設定すると、ほとんどのWebサイトは狭すぎるため、不安定に表示されます

そのため、ブラウザはビューポート[このビューポートはレイアウトビューポートを指します]をデフォルトでは幅の広いものです。値は 980px または 1024px です。これは、少なくとも PC の Web サイトをモバイル端末で表示できることを保証しますが、超過した部分は水平にスクロールします。

2. 概念

1. CSS ピクセル

HTML ページの単位は px です。PC では、1 css ピクセル = 1 物理ピクセル

異なるデバイスでは、1 ピクセルは異なるデバイスのピクセルに対応します。解像度は 320*480、つまり 1px=1 物理ピクセルです。iPhone 4 の解像度は 640*960 ですが、画面サイズは変更されていません。つまり、同じ領域には 2 倍のピクセルがあることになります。 css px=2 物理ピクセル。

2. 物理ピクセル

は、1 インチあたりのピクセル数を表します。

3. 解像度

モニターは何ピクセルを表示できますか?モニターのディスプレイのピクセル数が多いほど、画像が細かくなり、同じ画面領域に表示できる情報が増えます。

4. devicePixelRatio

window.evicePixelRatio=物理ピクセル/CSS ピクセル。 iPhone 4 では、devicePixelRatio=2 は 1 CSS ピクセル = 2 物理ピクセルを意味します。

devicePixelRatio には、さまざまなブラウザーでの互換性の問題があり、完全に信頼できるわけではありません。 5. レイアウト ビューポート

モバイル デバイスのデフォルトのビューポートと CSS レイアウトは、参照システムとしてレイアウト ビューポートを使用して計算されます。

Document.documentElement.clientWidth を取得します

このサイズは動的に設定できます。

6. 表示ビューポート ビジュアル ビューポート

ブラウザの表示領域のサイズを表します。ユーザーがブラウザを拡大すると、このサイズは小さくなります

window.innerWidth は

7. 理想的なビューポート

画面サイズ デバイス画面のサイズ単位は物理ピクセルです

screen.width は変更されない画面サイズを取得します

このビューポートを使用すると、ユーザーはズームや水平スクロールなしで Web サイトのすべてのコンテンツを通常どおりに表示できます

モバイル Web サイトのセットアップは通常、このビューポートに基づいて行われるため、理想的なビューポートの幅はデバイスの画面幅と同じになります。解像度に応じて、理想的なビューポート用に設計された Web サイトをユーザーに完璧に表示できます。

3. 画面の適応

モバイル端末で PC ページを正常に表示するには、ビューポートをより広い値に設定します。このビューポートはレイアウト ビューポートです。

レイアウト ビューポートの幅はブラウザの表示領域の幅より大きいため、ブラウザの表示領域 (視覚的なビューポート) のサイズを表すビューポートが必要です。

多くの Web サイトはモバイル デバイス向けに個別に設計されているため、モバイル デバイスに完全に適応できるビューポートが必要です。これが理想的なビューポートです。完全な適応とは、ズームインまたはズームアウトする必要がなく、水平スクロール バーを必要とせずに Web サイトのすべてのコンテンツを通常どおりに表示できることを意味します。

理想的なビューポートには固定サイズはなく、デバイスが異なれば理想的なビューポートも異なります。画面が 320 か 640 かにかかわらず、すべての iPhone の理想的なビューポートは 320 ピクセルです。Android ではさらに複雑で、320 ピクセル、360 ピクセル、384 ピクセルなどがあります。さまざまなデバイスの理想的なビューポートの幅については、http を確認してください。 ://viewportsizes.com には、多くのデバイスに最適な幅のコレクションがあります。

モバイル デバイスのビューポートは、

レイアウト ビューポート

、

理想的なビューポート

の 3 つのカテゴリに分類されます。 理想的なビューポートは、モバイル デバイスに最も適したビューポートです。モバイルデバイスの画面の幅 特定の要素の幅が CSS で理想的なビューポートの幅に設定されている限り (単位は px)、この要素の幅はデバイスの画面の幅になります。幅の効果が 100% になります。理想的なビューポートの重要性は、画面の解像度に関係なく、理想的なビューポート用に設計された Web サイトを、ユーザーが手動でズームしたり水平スクロール バーを操作したりすることなく、完璧にユーザーに表示できることです。 モバイル デバイスのデフォルトのビューポートは、画面よりも広いビューポートであるレイアウト ビューポートですが、モバイル デバイス用の Web サイトを開発する場合に必要なのは、理想的なビューポートです。では、どうすれば理想的なビューポートを取得できるでしょうか?メタタグが登場する番です。レイアウト ビューポートの幅を表示ビューポートとします。 すごいです 参考:

http://www.ituring.com.cn/article/130015

http://www.cnblogs.com/2050/p/3877280.html