ビューポートの基本原理と詳細な使用方法

1. ビューポートの概要

モバイルブラウザは通常、画面よりも幅の広い仮想ウィンドウにページをレンダリングします。この仮想ウィンドウがビューポートです。この仮想ウィンドウの目的は、モバイルデバイスに適切に適合していない Web ページをユーザーに完全に表示できるようにすることです。モバイルデバイスを使用して Web ページのデスクトップバージョンにアクセスすると、水平スクロールバーが表示されることがあります。ここでの表示可能領域の幅は、ビューポートの幅です。

通常の使用では、次のコードを使用してページを拡大縮小できます。

<meta name="viewport" content="width=デバイス幅、初期スケール=1" />

ページを拡大したくない場合は、次のコードを使用してください。

<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ">

2. CSSのピクセルとデバイスピクセルの違い

デスクトップ Web ページを開発する場合、CSS の 1px はデバイス上の 1px と等しくなります。ただし、CSS の 1px は単なる抽象的な値であり、実際のピクセル数を表すものではありません。また、モバイルデバイスでは、デバイスごとにピクセル密度が異なるため、CSS の 1px は実際のデバイスのピクセル値と等しくない場合があります。ユーザーがズームすると、CSS で 1px が表すデバイスピクセルの数も変わります。この比率はdevicePixelRatioです

物理ピクセル / 独立ピクセル = devicePixelRatio
ブラウザを拡大し、コンソールで window.devicePixelRatio を印刷して、devicePixelRatio のサイズを確認できます。ここでの独立したピクセルは、CSS では px として理解できます。

3. ビューポートの基本

コード：

以下はビューポートのいくつかのプロパティです。これらのプロパティは組み合わせて使用できます。複数のプロパティはカンマで区切る必要があります。ここでは、理想的な条件でのビューポートを指す「理想的なビューポート」という概念を展開します。ユーザーは、ズームや水平スクロールをすることなく、Web ページのすべてのコンテンツを正常に表示でき、CSS で定義されているテキストがどれだけ小さくても、すべてのテキストをはっきりと見ることができます。

財産	説明する
幅	ビューポートの幅を制御します。数値を指定するか、デバイス幅を設定して指定することができます。
身長	ビューポートの高さを制御します。このプロパティはあまり重要ではなく、ほとんど使用されません。
初期スケール	ページが最初に読み込まれるときの理想的なビューポートのズームレベルを制御します。通常は1に設定されていますが、小数点を指定することもできます。
最大スケール	ユーザーに許可される最大ズーム値は小数点付きの数値です。
最小スケール	ユーザーが許可する最小ズーム値（小数点付きの数値）
ユーザースケーラブル	ユーザーにズームを許可するかどうか。値は「no」または「yes」で、no は許可されないことを意味し、yes は許可されることを意味します。

4. 高度なビューポート

1.幅と初期スケール
width と initial-scale が設定されている場合、ブラウザは適応のために最大値を自動的に選択します。設定した場合:

<meta name="ビューポート" content="幅=400, 初期スケール=1">

ブラウザは適応のために大きい値を選択します。現在のウィンドウの理想的なビューポートの幅が 300 で、初期スケールの値が 1 の場合、幅の値は 400 になります。現在のウィンドウの理想的なビューポートが 480 の場合、480 が使用されます。

実際、width=device-widthとinitial-scale=1はどちらもアプリケーションの理想的なビューポートを表します。しかし、iPadやiPhone、IEなどのモバイルデバイスでは、水平画面か垂直画面かに関係なく、垂直画面の幅がデフォルトで使用されます。最も互換性のある書き方は次のとおりです。

<meta name="viewport" content="width=デバイス幅、初期スケール=1">

2. プロパティを動的に変更する

a. ドキュメント.write()

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

b.set属性

var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');

ビューポートの概念

CSS におけるピクセルとデバイスピクセルの違い

物理ピクセル / 独立ピクセル = devicePixelRatio

ブラウザを拡大し、コンソールで window.devicePixelRatio を印刷して、devicePixelRatio のサイズを確認できます。ここでの独立したピクセルは、CSS では px として理解できます。

ビューポートの基本<br /> 典型的なモバイル向けに最適化されたサイトには、次のような内容が含まれます。

<meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1">

財産	説明する
幅	ビューポートの幅を制御します。数値を指定するか、デバイス幅を設定して指定することができます。
身長	ビューポートの高さを制御します。このプロパティはあまり重要ではなく、ほとんど使用されません。
初期スケール	ページが最初に読み込まれるときの理想的なビューポートのズームレベルを制御します。通常は1に設定されていますが、小数点を指定することもできます。
最大スケール	ユーザーに許可される最大ズーム値は小数点付きの数値です。
最小スケール	ユーザーが許可する最小ズーム値（小数点付きの数値）
ユーザースケーラブル	ユーザーにズームを許可するかどうか。値は「no」または「yes」で、no は許可されないことを意味し、yes は許可されることを意味します。