tl; dr：同一台计算机（Chrome，Firefox，IE 11）上的所有浏览器都认为118px高于同一台计算机（带有Windows 8.1的联想Yoga）上的IrfanView，Photoshop甚至MsPaint之类的程序，但我没有知道为什么。
我正在从photoshop文件中编码网页。它具有一个118像素高的菜单。
简单的CSS。 See the jsFiddle.nav { height:118px; width:100%; border:1px red solid;}
我完成了网页，使其具有响应性，等等。一切看起来不错。
现在，我将网页以1440x900的分辨率加载到我的Lenovo Yoga上，我的客户在Mac上使用该分辨率。
而且我看到该框的高度有所提高，但Chrome仍然说它的高度为118px。但是，当我截取屏幕截图并对其进行测量时，IrfanView表示大约为146像素。在具有相同屏幕分辨率的同一台笔记本电脑上。
现在，我了解到屏幕的像素大小不同，但是为什么Chrome浏览器在同一台计算机上对像素大小的测量不同于MsPaint，IrfanView和Photoshop？我已经读过关于堆栈溢出的目的应该使用什么单位的信息，但我仍然不明白为什么Chrome和IE 11中的118px会比MsPaint中的118px更高。
我的网站甚至设置了元视口标签集，据我了解，该标签集的像素分辨率实际上应该相差不大。<meta name="viewport" content="width=device-width, initial-scale=1">
在配备经典1920x1080 LCD的台式机上，没有任何区别。 Chrome中的118px等于任何图形软件（photoshop，mspaint，irfanview）中的118px，处于开发模式时等于118px。
最佳答案
我了解到device pixel ratio这是造成麻烦的原因...显然，我的台式机比率是1，而在Yoga上是1.25，在客户的Mac上必须是类似的比率。
在我的桌面上，CSS 118px等于屏幕上的118px ...而CSS 118px等于Yoga笔记本屏幕上的147px。