ビューポートの基本原理と詳しい使い方

I. ビューポートの概要

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

一般的な用途では、次のコードを使用してページを拡大縮小することができます。

ページを拡大縮小させたくない場合は、以下のコードを使用します。

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

デスクトップのWeb開発では、cssの1pxはデバイス上の1pxですが、cssの1pxはあくまで抽象的な値で、実際に何ピクセルあるかは表していません。一方、モバイルデバイスでは、デバイスによってピクセル密度が異なり、cssの1pxが実際のデバイス上の1ピクセル値と一致しないことがあります。また、ユーザーのスケーリングによって、cssの1pxがデバイスの何ピクセルに相当するかも変化します。この比率がdevicePixelRatioです。

物理ピクセル/独立ピクセル = devicePixelRatio
ブラウザで拡大縮小し、コンソールで window.devicePixelRatio を表示すれば、devicePixelRatio の大きさを確認することができるのです。個々のピクセルがcssのpxとして理解できるところ。

III. ビューポートの基本

コード

以下は、ビューポートのいくつかの属性であり、複数の属性を同時に使用する場合は、カンマで区切って混在させることができる。ここでは、理想的なビューポートと呼ばれる概念を展開し、ページのすべての内容を正常に表示するためにユーザーのズームや水平スクロールバーを必要とせず、cssで定義された文字がどんなに小さくても、表示したときにすべての文字がはっきりと見える理想的なビューポートを指します。

{テーブル 属性 説明 本文 幅 ビューポートの幅を制御します。数値を指定するか、デバイス幅を指定して 高さ ビューポートの高さを制御します。あまり重要ではない属性で、ほとんど使用されません。 イニシャルスケール idealviewportでロードされるとき、ページの初期スケールを制御します。通常、1が設定され、これは10進数です。 最大スケール ユーザーに許可された最大スケール（数値、場合によっては小数付き 最小スケール ユーザーが使用できる最小のスケール（小数付き数値 ユーザスケーラブル 値は "no" または "yes" で、no は許可しないことを意味し、yes は許可することを意味します。

IV.ビューポートプログレッション

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

ブラウザは大きい方の値を選んで適応させる。カレントウィンドウの理想的なビューポートの幅が300であれば、初期スケール値は1であり、得られた値は400の幅となり、カレントウィンドウの理想的なビューポートが480であれば、480が取られる。

実は、width=device-widthもinitial-scale=1もアプリケーションの理想ビューポートを表していますが、ipadやiphone、IEなどのモバイル端末では、横画面と縦画面が分かれておらず、デフォルトは縦画面の幅を取るため、互換性のある書き方として最も適しているのは

2. 動的に変化する属性

a. document.write()

document.write(') ')

b.setAttribute

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

ビューポートコンセプト

モバイルブラウザは通常、画面より広い仮想ウィンドウでページをレンダリングします。この仮想ウィンドウの目的は、モバイル用に調整されていないページを適切に表示することです。私たちは時々、ウェブページのデスクトップ版にアクセスするためにモバイルデバイスを使用すると、表示可能な領域の幅がビューポートの幅である水平スクロールバーが表示されます。

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

デスクトップのWeb開発では、cssの1pxはデバイス上の1pxですが、cssの1pxはあくまで抽象的な値で、実際に何ピクセルあるかは表していません。一方、モバイルデバイスでは、デバイスによってピクセル密度が異なり、cssの1pxが実際のデバイス上の1ピクセル値と一致しない場合があります。また、ユーザーのスケーリングによって、cssの1pxがデバイスの何ピクセルに相当するかも変化します。この比率がdevicePixelRatioです。

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

ブラウザを拡大し、コンソールでwindow.devicePixelRatioを表示すれば、devicePixelRatioの大きさを確認することができます。個々のピクセルがcssのpxとして理解できるところ。

ビューポートベース
モバイルに最適化された一般的なサイトには、次のようなものがあります。

以下、ビューポートのプロパティをいくつか紹介するが、複数のプロパティを同時に使用する場合は、カンマで区切って混在させることが可能である。ここでは、理想的なビューポートと呼ばれる概念を展開し、ページのすべての内容を普通に見るためにユーザーのズームや横スクロールバーを必要とせず、cssで定義された文字がどんなに小さくても、表示したときにすべての文字がはっきりと見える理想的なビューポートを指します。

{テーブル 属性 説明 本文 幅 ビューポートの幅を制御します。数値を指定するか、デバイス幅を指定して 高さ ビューポートの高さを制御します。あまり重要ではない属性で、ほとんど使用されません。 イニシャルスケール idealviewportでロードされるとき、ページの初期スケールを制御します。通常、1が設定され、これは10進数です。 最大スケール ユーザーが使用できる最大スケール（数値、場合によっては小数付き 最小スケール ユーザーが使用できる最小のスケール（小数点以下の数値 ユーザスケーラブル 値は "no" または "yes" で、no は許可しないことを意味し、yes は許可することを意味します。

ビューポートアドバンス

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

ブラウザは大きい方の値を選んで適応させる。カレントウィンドウの理想的なビューポートの幅が300であれば、初期スケール値は1であり、得られた値は400の幅となり、カレントウィンドウの理想的なビューポートが480であれば、480が取られる。

実は、width=device-widthもinitial-scale=1もアプリケーションの理想ビューポートを表していますが、ipadやiphone、IEなどのモバイル端末では、横画面と縦画面が分かれておらず、デフォルトは縦画面の幅を取るため、互換性のある書き方として最も適しているのは

2. 動的に変化する属性

a. document.write()

document.write(') ')

b.setAttribute

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

さて、今回紹介するのは、自分たちの測定ニーズに応じて選択できるものです。一般的には、PCとモバイルをアダプティブなしで使用する場合、スケーリングに対応しなくても、モバイル側にジャンプした場合もスケーリングに影響がないと言われています。