この記事では、物理的なピクセル、ピクセル密度、解像度、CSSピクセル、デバイスのピクセル比、ダブル画像、レイアウトビューポート、ビジュアルビューポート、理想的なビューポート、メタについてまとめています。
まず、最も基本的な物理ピクセルについて説明します。
物理ピクセル（デバイスピクセル）
物理ピクセルは実ピクセルです。ディスプレイデバイスの最小物理コンポーネントの1つ、つまり画面に表示できる最小の粒子です。同じデバイスでは、その物理ピクセルは固定されています。つまり、デバイスの解像度は固定されています。 。
いわゆるダブルスクリーンおよびダブルスクリーンとは、デバイスがCSSピクセルを表示する物理ピクセルの数を指し、CSSピクセルを表示する物理ピクセルが多いほど、その鮮明度が高くなります。
画面の実際の物理ピクセルは、次のコードで取得できます
window.screen.width //获得屏幕水平方向上的像素数
window.screen.height //获得屏幕垂直方向上的像素数
解像度：ピクセル単位で測定され、画面の水平方向と垂直方向のピクセル数を表します。解像度が高いほど、ピクセル数が多くなり、検知された画像がより正確になります
Web開発では、px（ピクセル）、em、pt（ポイント）、in（インチ）、cm（センチメートル）などを長さの単位として使用できます。上記の単位を相対長さ単位と絶対長さ単位に分けることができます。
- 相対長さの単位：px、em
- 絶対長さの単位：in、cm、pt
次の図から、画面は3.5インチであるが画面の解像度は2倍であることがわかります。インチは絶対的な長さであり、ピクセルは相対的な長さであり、ピクセルは固定長ではないことが
わかります。したがって、ピクセル密度の概念
ピクセル密度
当初、ピクセル密度DPIは、プリンターが1インチあたりに排出できるインクドットの数を示すために印刷業界で使用されていました。コンピューターはその概念を利用しており、最小単位はピクセルです。PPI値は、画面の1インチあたりのピクセル数を表すために使用できます。次の図から、1インチの場合の物理ピクセル数の違いを直感的に確認できます。
このことから、ピクセル密度が高いほど、ユニットサイズに収容できるピクセル数が多くなり、表示される画像がより鮮明になることがわかります。
そして、私たちはしばしばRetinaスクリーン（Retina）と言います、それはより高いPPI（320より大きい）スクリーンを持っていることを知っています
それでは、ピクセル密度を計算する方法は？
数式：
例：
iPhone3G / Sの画面解像度は480 320pxで、iPhone4 / Sの画面解像度は960 480pxで、画面サイズは3.5インチです。ピタゴラスの定理によって計算
できます。上の図からわかるように、 iPhone4 / Sのピクセル密度はiPhone3G / Sの2倍です
これまでのところ、ディスプレイの鮮明度に対するピクセル密度の影響を理解していますが、別の問題があります。低解像度デバイスと高解像度デバイスが共存すると問題が発生します。同じ画像の場合、低ピクセルでエリア全体を埋めることができます、高ピクセルは塗りつぶすことができません。ここでは、デバイス非依存ピクセルと呼ばれる新しいユニットを導入する必要があります
CSSピクセル
デバイス非依存ピクセル、論理ピクセル、デバイス非依存ピクセルとも呼ばれ、IOSはPT、AndroidはDIPまたはDPと呼ばれます。デフォルトでは、PC側の物理ピクセルと同じです。ブラウザのズームにより、ピクセルは大きくまたは小さく表示されます。 3つの状況
デバイスピクセル比（DPR）
デバイスの論理ピクセルに対する物理ピクセルの比率：デバイスピクセル比（dpr）=物理ピクセル（dp）/デバイス独立ピクセル（dip）
次のコードで取得できます。デバイスの物理ピクセルとデバイスに依存しないピクセルの比率
window.devicePixelRatio
Retina画面のiPhoneでは、devicePixelRatioの値は2です。これは、1 cssピクセルが2物理ピクセルに相当することを意味します。一般的に、ダブルスクリーン（網膜）のdprは2、トリプルスクリーンは3です。
比率を求めることにより、対応する処理を行うことができる。つまり、対応する比率を取得することで、画像を対応する比率に拡大できます。
ただし、これでは別の問題が発生し、画像を拡大すると精度が低下します。
したがって、精度を維持するために2重画像または3重画像で縮小できる2重画像の概念を紹介します。
ピクセル部分を見てから、モバイル側の最も重要なビューポートを見てみましょう
ビューポート
PC側のビューポートのサイズは、ブラウザのサイズによって異なります。CSSピクセルでは、
html要素のサイズは、次のコード、つまりPC側のビューポートの幅と高さによって取得できます。
document.documentElement.clientWidth
document.documentElement.clientHeight
ヒント：ブラウザの幅を調整すると、それに応じてビューポートの幅と高さが変わります
ビューポートの概念はモバイルにさらに適用されます
（1）レイアウトビューポート（レイアウトビューポート）
測定の単位としてCSSピクセルを使用できるWebページレイアウト領域のサイズを参照します。モバイルデバイスはデフォルトでより大きいビューポートを設定し（IOSなどのデフォルトは通常980pxです）、レイアウトビューポートの幅はブラウザーの表示可能領域の幅よりも大きくなります。
レイアウトビューポートの幅は、document.documentElement.clientWidthで取得できます。
document.documentElement.clientWidth
document.documentElement.clientHeight
（2）ビジュアルビューポート（visual viewport）
つまり、デバイスのピクセル解像度iphone8を例にとる
と、解像度750 * 1334ピクセルのビジュアルビューポートの幅は、window.innerWidthを通じて取得できます。
window.innerWidth
window.innerHeight
レイアウトビューポートとビジュアルビューポートの違いを簡単に説明します。
（3）理想的なビューポート（理想的なビューポート）
理想的なビューポートは、モバイルデバイスに完全に適合できるビューポートです。密度画面や解像度に関係なく、表示されるサイズはほぼ同じです。理想的なビューポートは固定サイズではなく、デバイスごとに理想的なビューポートが異なります。理想的なビューポートはデバイスの幅と同じです。たとえば、iphone8の理想的なビューポートは375pxです。
理想的なビューポートの意味は、どの解像度の画面でも、理想的なビューポート用に設計されたWebサイトは、ズームや水平スクロールなしでユーザーに完全に表示できることです。
window.screen.width
window.screen.Height
画面を反転
スマートフォンの画面をめくると：
ビジュアルビューポートの幅>レイアウトビューポートの幅の場合、ビューポートは、ビューポートの幅に合わせてズームイン（ズームイン、ズームイン）する必要があります。
ビジュアルビューポートの幅<レイアウトビューポートの幅の場合、ビューポートはズームアウト（ズームアウト、ズームアウト）して、ビジュアルビューポートの幅に合わせる必要があります。
<meta name="viewport" content="width:device-width">
device-widthは、その値として携帯電話の水平物理ピクセル/変換システムを取り、対応するレイアウトビューポート値をリセットして、ビジュアルビューポートに適合させます。
メタタグの役割
メタタグを使用してビューポートを制御する
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Appleの仕様では、メタビューポートには次の6つの属性があります。
| パラメータ | 意味 |
|---|---|
| 幅 | レイアウトビューポートの幅を正の整数または文字列「width-device」に設定します。通常は文字列「width-device」 |
| 初期スケール | ページの初期ズーム値を、小数を含む数値として設定します。通常は1.0です。 |
| 最小スケール | ユーザーが許可する最小ズーム値は、小数を取ることができる数値で、通常は1.0です。 |
| 最大規模 | ユーザーが許可する最大ズーム値は数値であり、小数をとることができ、通常は1.0です。 |
| ユーザースケーラブル | ユーザーにズームを許可するかどうかにかかわらず、値は「いいえ」または「はい」です。いいえまたは0は許可されないことを意味し、はいまたは0は許可されることを意味します |
| 高さ | レイアウトビューポートの高さを設定します。この属性は重要ではなく、めったに使用されません |
initial-scale =理想的なビューポート/レイアウトビューポートは、width = device-wdithを設定することと同等ですが、iPhoneなどの互換性の問題を解決するために、iPadとIEは水平および垂直画面になり、両方の属性を書き込むことを選択します
最終まとめ
物理的なピクセルは実数ですが、固定長はありません。同じ画面サイズで、画面上の物理的なピクセルが多いほど、画像は鮮明になります。つまり、ピクセル密度が高いほど、画像は鮮明になります。
さまざまな画面の解像度を解決するために問題によって引き起こされる画像のサイズは異なり、CSSピクセルが導入されます。これから、デバイスピクセル比の比率、つまり物理ピクセルとCSSピクセルの関係が計算されます。デバイスピクセル比が2の場合、ダブルスクリーンの1 cssピクセルは2に相当します物理ピクセルの場合、画像の精度とサイズを確保するために、2 倍の画像を使用し、2倍に減らします。
ビューポートは、3つのレイアウトビューポート、ビジュアルビューポート、理想的なビューポートに分かれています。ディールビューポートは、モバイルデバイスに完全に適合できるビューポートです。
メタタグを記述する推奨方法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
この記事の参考資料：
https : //www.cnblogs.com/jianxian/p/11178378.html
https://blog.csdn.net/zhouziyu2011/article/details/60570547
https://www.cnblogs.com/ 2050 / p / 3877280.html
https://blog.csdn.net/weixin_34348174/article/details/87962105
https://segmentfault.com/a/1190000006068808
https://segmentfault.com/a/1190000011586301
便利ならいいね！
