この文章は私の古いブログで送った文章ですが、最近またこの問題にぶつかって、整理して修正してここに送りました.

ピクセル単位

画素単位は、デバイス画素、論理画素、CSS画素の3種類.

デバイス画素(devicepixels)、デバイス解像度

デバイス画素は物理画素とも呼ばれる.
デバイス画素とは、ディスプレイ上の実際の画素を指し、各画素の大きさは画面固有の属性であり、画面出荷後は変更されません.デバイス解像度は、このディスプレイの幅と高さがそれぞれ何個のデバイス画素であるかを記述する.デバイス画素とデバイス解像度はオペレーティングシステムに任せて管理し、ブラウザはデバイス解像度の大きさを知らないし、知る必要もない.ブラウザは論理解像度を知るだけでいい.

デバイス独立画素（デバイスIndependent Pixels）、論理解像度

デバイス独立画素は論理画素とも呼ばれる.
デバイス独立画素(dips)は、オペレーティングシステムが開発者を容易にするために提供する抽象的なものである.アプリケーションとオペレーティングシステムとの間に長さが記述されている場合、オペレーティングシステムは、デバイスの独立したピクセルからデバイスのピクセルに単位を変換し、画面上の本当の物理的なピクセルポイントを制御します.
アプリケーションとデバイスのピクセル間でこのような単位を定義する必要があるのはなぜですか?なぜアプリケーションはデバイスピクセルを直接使用して長さを記述すべきではないのですか?ディスプレイの製造技術がますます進歩するにつれて、スクリーンの画素密度はますます高くなります.同じ1920*1080画素で、以前は広いディスプレイに置いていたが、今では携帯電話の画面に置くことができるようになった.もともと12個のデバイス画素のフォントであったが、現在は24個のデバイス画素が近いサイズを得ることができ(これは字がより鮮明になったことを示している)、アプリケーションがデバイス画素を直接使用すると、一部の画面では12個のデバイス画素のフォントがあり、他の画面では24個のデバイス画素になるというアプリケーションの作成が非常に困難になる.したがって、オペレーティングシステムは、デバイスの独立したピクセルを定義します.オペレーティングシステムは、画面のパラメータにかかわらず、デバイスの独立したピクセルで定義されたサイズを適切なサイズで表示できることを保証します(これもデバイスの独立したピクセル名の由来です).オペレーティングシステムはどのようにしてできますか?画素密度の高い画面では、複数のデバイス画素を1つの論理画素に分割する.どれだけのデバイス画素を1つの論理画素に分割するかは、オペレーティングシステムによって決定される.上記の例では、「本来の高さ12個のデバイス画素のフォントは、現在の高さ24個のデバイス画素で同じサイズになる」として、オペレーティングシステムは1つの論理画素を2*2個の真の画素と定義し、デバイスの独立した画素サイズを変更する必要がなく、新しいデバイスと古いデバイスにかかわらず、表示のサイズはほぼ同じである.
デバイスの独立したピクセルとデバイスのピクセルの割合はどのくらいで、ディスプレイメーカーとオペレーティングシステムメーカーは調査研究を通じて最も視聴に有利な割合を得ることができます.一般的な法則は、スクリーンの画素密度が高いほど、1つのデバイスの独立した画素を表示するためにより多くのデバイス画素が必要になることである.screen.width/heightで得られた数値は、ブラウザの領域だけでなく、画面全体の幅と高さ(単位:デバイス独立画素)である.この値は、ページのスケール、ブラウザウィンドウのサイズによって変わりません.
論理解像度は、画面の幅*高さで表されます(単位:デバイス独立画素).

オペレーティングシステムの設定によりデバイスの独立したピクセルのサイズを変更

オペレーティングシステムの解像度設定でデバイスの独立したピクセルのサイズを変えることができますが、フロントエンドで開発されたときは完全に定値とすることができます.(オペレーティングシステムの解像度を頻繁に変更する人はいません)私の画面のデバイス解像度は1920*1200(ユニット:デバイスピクセル)、現在の解像度設定の論理解像度は1280*800(ユニット:デバイス独立ピクセル)です.図から、横、縦方向のデバイス画素数は、デバイス独立画素の1.5倍であることが検証される.これは、デバイス独立画素のエッジ長がデバイス画素のエッジ長の1.5倍であることを意味する.
window.devicePixelRatioは以下で説明する.

cssピクセル

CSSで使用されるpxは、いずれもcss画素、例えばwidth: 128pxを指す.css画素のサイズは変化しやすい.ページをスケールすると、要素のcssピクセル数は変わりません.cssピクセル当たりのサイズだけが変わります.すなわち、width: 128pxの要素は200%スケーリング後も幅が128 css画素であるが、css画素当たりの幅と高さが2倍になっただけである.元の要素幅が128個のデバイス独立画素である場合、200%スケール後の要素幅は256個のデバイス独立画素である(css画素幅は常に128).
開発者は開発時に基本的にcss画素のみを考慮し,ここではデバイス画素とデバイス独立画素がページスケールの原理を述べるためだけであり,viewportを後で理解するのに便利であることを紹介する.

css画素とデバイス独立画素の関係

スケールは、cssピクセルのエッジ長/デバイスの独立したピクセルのエッジ長です.スケーリングスケールとデバイス独立画素エッジ長に基づいてcss画素エッジ長を算出することができる.スケールが100%の場合、1つのcss画素サイズは1つのデバイス独立画素に等しい.

window.devicePixelRatio

window.デバイスPixelRatioデバイスのピクセル比.デバイスPixelRatio=CSSピクセルエッジ/デバイスピクセルエッジ.例えばdevicePixelRatio=2は、CSS画素の辺長がデバイス画素の2倍であることを示しているので、同じ長さの直線上では、デバイス画素の数がCSS画素の数の2倍であり、1つのCSS画素を表示するには4つのデバイス画素が必要である.
デスクトップブラウザでは、ズームによってCSS画素のエッジ長が変化し、windowが発生する.デバイスPixelRatioの変更!
でも!モバイルブラウザがディスカッションに参加すると、いくつかのことが複雑になります.実際、デスクトップブラウザとモバイルブラウザのスケールメカニズムは違います!デスクトップブラウザはpage zoom、モバイルブラウザはpinch zoomです.CSSの標準によって、windowを計算します.デバイスPixelRatioの場合、CSS画素サイズへのpinch zoomの影響は考慮されません.したがって、移動端でのスケーリングはwindowにならない.デバイスPixelRatioの変更.chromeのリモートデバッグでこれをテストできます.
以上の2枚の図は,モバイルブラウザで前後をスケーリングし,それぞれ取得したdevicePixelRatio値を示しており,スケーリングの影響を受けないことがわかる.
Page zoomとpinch zoomの主な違いは、前者はlayout viewportのサイズ(CSS画素単位)を変更し、後者は変更しないことです.
なぜ2つのスケールメカニズムを作るのですか?なぜなら、
デスクトップ側で拡大する場合、ユーザー
横スクロールバーは表示されないため、layout viewport(Webレイアウト幅)を常にvisual viewport(ブラウザウィンドウの可視幅)と等しく保つ必要があります.拡大・縮小時の
物理的なサイズは変更されません(たとえば、センチメートル単位またはデバイスピクセル単位)が、CSSピクセルのサイズは拡大・縮小とともに大きくなります.
Webページのlayout/visual viewport(CSSピクセル単位)が小さくなりました(1行に少ない文字しか表示できません).そして
モバイル端末では、携帯電話の画面が非常に狭く、同じメカニズムを使用すると、ユーザーが拡大すると、ページのlayout viewportが小さくなり(例えば200 CSS画素まで小さい)、レイアウトが非常に気持ち悪くなります.したがって、モバイル側で拡大すると、ブラウザはlayout viewportに干渉せず、CSS画素とともに「膨張」します.
Layoutviewportの幅(CSSピクセル単位)は変わりませんが、visual viewportの幅(CSSピクセル単位)が小さくなるため、横スクロールバーが表示されます.(携帯電話でページを拡大すると、1行に表示できる字の数は変わりませんが、横にスクロールするだけで1行全体を見ることができます)
ppk大神は彼の文章でもpage zoomとpinch zoomを説明した.
また、オペレーティングシステムの解像度を変更すると、デバイスの独立画素の辺長が変化するため、CSS画素の辺長が変化する(前述のように、CSS画素の辺長はスケーリングスケールとデバイスの独立画素から算出される)、windowが発生する.デバイスPixelRatioの変更!ネット上の多くの文章では、デバイスの独立した画素とデバイスの画素を区別しないので、この現象を説明することはできません.

例

私の画面幅は1280個のデバイスの独立したピクセルです.この値はwindow.screen.widthによって直接得ることができ、あるいはオペレーティングシステムのスケーリングスケールとディスプレイの物理画素幅に基づいて自分で計算することができる.私はdiv幅も1280 px(css画素)に設定し、100%にスケールすると、DIVは画面全体を満たし、横スクロールバーは現れません.(これは、スケールが100%の場合、1つのCSS画素が1つのデバイス独立画素に完全に等しいことを示しています.)
ここには小さな穴があります.
縦スクロールバーが存在すると、わずかな幅を占めます.このとき、エレメント幅をスクリーン幅1280 pxに設定すると、エレメント全体をスクリーンに装着できず、横スクロールバーが表示されます.
上記の例では縦スクロールバーは存在しないため,この問題はなく,将来開発に際して注意する.
5 pxのオレンジ色の枠線を設定したことに気づきましたが、なぜ最終的な幅は1280+5+5=129ではないのでしょうか.すべての要素にbox-sizing: border-boxのスタイルを追加したので、私が設定した枠線幅はwidthに含まれます.つまり、最終的に枠線を追加した後の幅は1280 pxです.
ブラウザウィンドウを縮小するとスクロールバーが表示されます.divの幅は変化しないため、どの単位で測定しても(デバイス画素、デバイス独立画素、CSS画素).
スケーリングは依然として100%であるため、css画素エッジ長/デバイス独立画素エッジ長は依然として1:1である.
ウィンドウを最大化し、Ctrl+ を介してブラウザを200%にスケーリングし、画面にはDIVの左半分しか表示されません.このとき、DIVの幅は1280 css画素ですが、幅は2560デバイスの独立した画素になります.
以下はテスト用の簡単なコードです.Chromeで試してみてください.

  
  
  
  



  
this is box
 1
    
 2
    
 3
    
 4
    
 5
    
 6
    
 7
    
 8
    
 9
    
 10
    

  

参考資料

A tale of two viewports — part one

A pixel is not a pixel - MDN

次の記事:initial containing block、viewport、および関連寸法を参照してください.この記事で紹介した3つの概念を使用して、応答レイアウトに関する概念と属性を説明します.