webapp size_html/css_WEB-ITnose

1. ビューポートの幅

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

1. CSS ピクセル

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

Document.documentElement.clientWidth を取得します

window.innerWidth は

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

多くの 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