モバイル端末におけるビューポートの具体的な使用法についての簡単な説明

PC側では、ビューポートはブラウザの表示領域を指し、その幅はブラウザウィンドウの幅と一致します。 CSS 標準ドキュメントでは、ビューポートは初期包含ブロックとも呼ばれます。これはすべての CSS パーセンテージ幅計算のルートであり、CSS レイアウトの最大幅を制限します。

モバイル端末はさらに複雑で、レイアウト ビューポート、ビジュアル ビューポート、理想ビューポートの 3 つのビューポートが含まれます。

この記事では、モバイルのビューポートに焦点を当てます。

1. 基本概念

1.1 2種類のピクセル

ピクセルとは、コンピュータ画面上で特定の色を表示できる最小の領域です。画面上のピクセル数が多いほど、同じ領域で表示できるコンテンツが多くなります。つまり、デバイスのサイズが同じであれば、ピクセルの密度が高いほど、画像が細かくなります。

では、CSS の要素にwidth: 250px;プロパティを設定すると何が起こるでしょうか?この要素の幅は何ピクセルですか?

実際、ここでは物理ピクセルと CSS ピクセルの 2 つの異なるピクセルが関係しています。

物理ピクセル（デバイスピクセル）

デバイス画面の物理ピクセル数を指します。どのデバイスの物理ピクセル数も固定されています。

CSSピクセル

これは CSS と JS で使用される抽象的な概念です。物理ピクセルとの比率は、画面の特性（高密度かどうか）やユーザーが行うズームによって異なり、ブラウザ自体によって変換されます。

Apple の Retina 画面では、通常の画面上のピクセル表示領域内で 4 つのピクセルがグループ化されてイメージがレンダリングされるため、より洗練された表示効果が得られます。この時点で、250px の要素は 500 物理ピクセルの幅に広がります。

ユーザーがズームインすると、1 つの CSS ピクセルがより多くの物理ピクセルにまたがることになります。

1.2 3つのビューポート

モバイル ブラウザの幅は通常 240 ～ 640 ピクセルですが、PC 用に設計されたほとんどの Web サイトの幅は少なくとも 800 ピクセルです。ブラウザ ウィンドウをビューポートとして使用し続けると、Web サイトのコンテンツは携帯電話では非常に狭く表示されます。

そのため、レイアウト ビューポート、ビジュアル ビューポート、理想的なビューポートの概念が導入され、モバイル端末のビューポートはブラウザーの幅とは関係なくなりました。

レイアウトビューポート

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

レイアウト ビューポートの幅/高さはdocument.documentElement.clientWidth / Heightを通じて取得できます。

ご覧のとおり、デフォルトのレイアウト ビューポートの幅は 980 ピクセルです。レイアウト ビューポートを明示的に設定する場合は、HTML でメタ タグを使用できます。

<meta name="ビューポート" content="width=400"> 

レイアウト ビューポートにより、ビューポートはモバイル ブラウザーの画面幅から完全に独立します。 CSS レイアウトはこれに基づいて計算され、これによって制約されます。

ビジュアルビューポート

ビジュアル ビューポートは、ユーザーが現在見ている領域です。ユーザーは、レイアウト ビューポートに影響を与えずに、ズームインやズームアウトしてビジュアル ビューポートを操作できます。

視覚ビューポートとズーム比の関係は次のようになります:當前縮放值= 理想視口寬度/ 視覺視口寬度

したがって、ユーザーがズームインすると、視覚的なビューポートは小さくなり、CSS ピクセルはより多くの物理ピクセルにまたがることになります。

理想的なビューポート

レイアウト ビューポートのデフォルトの幅は理想的な幅ではないため、Apple や他のブラウザ メーカーは、デバイスにとって最も理想的なレイアウト ビューポート サイズである理想的なビューポートの概念を導入しました。理想的なビューポートに表示される Web サイトは、ユーザーがズームしなくても最適な幅になります。

理想的なビューポートの値は、実際には画面解像度の値であり、対応するピクセルはデバイス非依存ピクセル (dip) と呼ばれます。ディップはデバイスの物理的なピクセルとは関係ありません。ディップは、どのピクセル密度でもデバイス画面上で同じスペースを占めます。ユーザーがズームしていない場合、1 つの CSS ピクセルは 1 つのディップに相当します。

レイアウト ビューポートを理想的なビューポートの幅と一致させるには、次の方法を使用できます。

<meta name="ビューポート" content="width=デバイス幅">

実際、これがレスポンシブ レイアウトの基礎となります。

2. ビューポート設定

ビューポート メタ タグを使用してレイアウト ビューポートを設定できます。

<meta name="ビューポート"
    コンテンツ="幅=デバイス幅、初期スケール=1.0、最大スケール=1">

各プロパティの詳細な説明は次のとおりです。

注目すべき点がいくつかあります:

• ビューポート タグはモバイル ブラウザーでのみ有効であり、PC ブラウザーでは無効です。
• ズーム率が100%の場合、ディップ幅 = CSSピクセル幅 = 理想的なビューポート幅 = レイアウトビューポート幅
• initial-scale または width を単独で設定すると互換性の問題が発生するため、レイアウト ビューポートを理想的なビューポートに設定する最善の方法は、両方のプロパティを同時に設定することです。
• Android Chrome ブラウザでは、user-scalable = no が設定されている場合でも、強制的に手動スケーリングを行うことができます。

3. 1回チャート、2回チャート、3回チャート

MacBook Pro Retina ディスプレイのハードウェア ピクセルは 2880px * 1800px です。画面解像度が 1920px * 1200px に設定されている場合、理想的なビューポートの幅は 1920px なので、ディップ幅は 1920px になります。理想的なビューポート幅とデバイスピクセル比の比率は1.5（2880/1920）です。この比率はデバイスピクセル比と呼ばれます：邏輯像素寬度* 設備像素比= 物理像素寬度

デバイスのピクセル比は、 window.devicePixelRatioまたは CSS のdevice-pixel-ratioを使用して取得できます。

一般的なデバイスのピクセル比は次のとおりです。

• 通常密度のデスクトップディスプレイ: devicePixelRatio = 1
• 高密度デスクトップディスプレイ（Mac Retina）: devicePixelRatio = 2
• 主流の携帯電話ディスプレイ: devicePixelRatio = 2 or 3

100px × 100px の画像の場合、CSS を使用して幅と高さを設定します。

{
    幅:100ピクセル;
    高さ:100px;
}

通常のディスプレイを備えたコンピューターで開くのは正常ですが、携帯電話または Retina 画面で開いて、論理解像度devicePixelRatio = 2に従ってレンダリングすると、1 つの電子ピクセルを表現するために 4 つの物理ピクセルを使用するのと同じになります。これは、2 倍の拡大鏡を使用して画像を見るのと同じで、画像がぼやけます。

このとき、画像の歪みを避けるために、@2x または @3x の画像を使用する必要があります。

これで、モバイル デバイスでのビューポートの具体的な使用法に関するこの記事は終了です。モバイル ビューポートに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。