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

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. ビューポートの基本

コード：

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

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

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');

ビューポートの概念

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

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

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

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

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

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

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

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

高度なビューポート

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');

さて、この記事はここで終わりです。必要に応じて選択してください。一般的には、適応のないPCやモバイル端末はスケーリングに対応していないものでも使えます。モバイル端末に飛びついてスケーリングできれば影響はありません。