HTML5モバイル開発におけるビューポートタグと関連するCSS使用の分析

この記事では、主にHTML5モバイル開発におけるビューポートタグと関連するCSS使用分析を紹介します。ビューポートは、多くの場合、ビューポートまたはビューポートと呼ばれ、モバイルレイアウトと画面適応に重要な役割を果たします。それを必要とする友達はそれを参照できます。

モバイルフロントエンドで一般的に言及されているビューポート（ビューポート）は、ブラウザがページコンテンツを表示する画面領域です。関係するいくつかの重要な概念は、DIP（デバイスに依存しないピクセルデバイスロジックピクセル）とCSSピクセルの関係です。ここでは、まず次の概念を理解しています。

一般に、モバイルデバイスのブラウザはデフォルトでビューポートメタタグを設定し、仮想レイアウトビューポートを定義して、携帯電話での初期ページ表示の問題を解決します。 iOSとAndroidは基本的にこのビューポートの解像度を980pxに設定するため、PC上のWebページは基本的に電話で表示できますが、要素は非常に小さく見え、通常はデフォルトでWebページを手動でスケーリングできます。

Visual Viewport（Visual Viewport）は、物理画面の視覚領域、画面ディスプレイの物理ピクセル、画面の同じサイズ、高いピクセル密度のあるデバイス、ハードウェアピクセルを提供します。たとえば、iPhoneの物理ピクセル：

iPhone5：640 * 1136

iPhone 6：750 * 1334

iPhone6 Plus：1242 * 2208

理想的なビューポートとディップ（デバイスロジックピクセル）

理想的なビューポートは、通常、画面解像度と呼ばれるものです。

DIP（デバイスロジックピクセル）は、デバイスのハードウェアピクセルとは何の関係もありません。ディップは、ピクセル密度のデバイス画面で同じスペースを占有します。

たとえば、MacBook ProのRetina画面ディスプレイのハードウェアピクセルは2880 * 1800です。画面解像度を1920 * 1200に設定すると、理想的なビューポートの幅値は1920ピクセル、ディップの幅値は1920年です。デバイスピクセル比は1.5（2880/1920）です。デバイスの論理ピクセル幅と物理ピクセル幅（ピクセル解像度）の関係は、次の式を満たします。

通常、携帯電話画面の解像度は許可されていません。通常、デフォルトでデバイスメーカーによって設定された固定値です。言い換えれば、DIPの価値は理想的なビューポートの価値（つまり、解像度）です。たとえば、iPhoneの画面解像度：

iPhone5：解像度320*568、物理ピクセル640*1136、 @2x

iPhone6：解像度375*667、物理ピクセル750*1334、 @2x

iPhone6 Plus：解像度414 * 736、物理ピクセル1242 * 2208、 @3x、（実際の表示された画像比が1080×1920に減少することに注意してください。特定の理由は、記事の最後に紹介されます）

ページレイアウトに使用されるCSSピクセル（PX）ユニット。スタイルのピクセルサイズ（幅：100pxなど）は、CSSピクセルで指定されています。 CSSピクセルとディップの比率は、Webページのスケーリング比です。 Webページがスケーリングされていない場合、CSSピクセルはDIP（デバイスロジックピクセル）に対応します。

ビューポートメタタグを使用してレイアウトを制御します

まず、Viewportメタタグの極端な特性を見てみましょう。