ビューポートを設定してもピクセルの高さが異なる

Question

tl; dr：1台のマシン（Chrome、Firefox、IE 11）のすべてのブラウザは、118pxがIrfanView、Photoshop、または同じマシンのMsPaintなどのプログラムよりも高いと見なしますWindows 8.1のLenovo Yoga）と私は理由を知らない。

私はフォトショップファイルからWebページをコーディングしています。それは118ピクセル高いメニューを持っています。

シンプルなCSS。 See the jsFiddle. nav { height:118px; width:100%; border:1px red solid; }

私はウェブページを完成させ、それを反応させるなどしています。

私のクライアントが自分のMacで使用する解像度1440x900のウェブページを自分のLenovo Yogaに読み込みます。

そして、私の箱は何とか高めですが、クロムはまだそれが118pxだと言っています。しかし、私がスクリーンショットを撮り、それを測定すると、IrfanViewは、それは約146ピクセルだと言います。同じラップトップで、同じ画面解像度で。

今、私は画面が異なるピクセルサイズを持っていることを理解しますが地獄Chromeは、同じマシンで異なるMsPaint、IrfanViewはとPhotoshopよりもピクセルサイズを測定し、なぜ？スタックオーバフローでどのような目的のためにどのユニットを使用するべきかを読んできましたが、ChromeとIE 11の118pxがMsPaintの118pxよりも高いレンダリングの理由をまだ理解できません。

私のウェブサイトには、実際にはあまり違いがないはずのメタビューポートタグがあります。古典的なLCD 1920x1080で自分のデスクトップで

<meta name="viewport" content="width=device-width, initial-scale=1">

は全く違いはありません。 Chromeの118ピクセルは任意のグラフィックソフトウェア（Photoshop、mspaint、irfanview）で118ピクセルに相当し、開発モードの場合は118ピクセルに相当します。

Answer 1

私はトラブルの原因であるdevice pixel ratioを学びました...明らかに私のデスクトップの比率は1ですが、私のヨガでは1.25で、クライアントのMacでは何か似ているはずです。

私のデスクトップでは、CSS 118pxは画面上で118pxに等しく、CSS 118pxはヨガノートブック画面では147pxに等しくなります。