即使使用视口集，像素高度也不同

Question

tl;博士：单台机器上的所有浏览器（Chrome，Firefox，IE 11）都认为118px比同一机器上的IrfanView，Photoshop甚至MsPaint等程序更高（联想Yoga with Windows 8.1） ）我不知道为什么。

我正在从photoshop文件中编写网页。它有一个118像素高的菜单。

简单的CSS。 See the jsFiddle. nav { height:118px; width:100%; border:1px red solid; }

我完成了网页，使其响应等等。一切看起来都不错。

现在我在我的联想瑜伽上加载了我的客户在他的Mac上使用的分辨率为1440x900的网页。

我看到盒子有点高，但Chrome仍然说它的高118px。但是当我拍摄截图并进行测量时，IrfanView表示它的内容大约为146px。在具有相同屏幕分辨率的同一台笔记本电脑上。

现在我明白屏幕有不同的像素大小，但为什么地狱Chrome在同一台机器上测量的像素大小与MsPaint，IrfanView和Photoshop不同？我已经阅读过什么单位应该用于堆栈溢出的目的，我仍然不明白为什么Chrome和IE 11中的118px会在MsPaint中呈现高于118px的内容。

我的网站甚至设置了元视口标记集，据我所知，像素分辨率实际上并没有多大差异。

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

在我的桌面上使用经典的LCD 1920x1080，没有任何区别。在任何图形软件（photoshop，mspaint，irfanview）中，Chrome中的118px等于118px，在开发模式下等于118px。

Answer 1

我了解了device pixel ratio这是我麻烦的根源......显然我的桌面比例是1，而在我的瑜伽它的1.25和我的客户端的Mac上它必须是某种东西类似。

在我的桌面上，CSS 118px在屏幕上等于118px ......而在WC笔记本电脑屏幕上CSS 118px等于147px。