Javascript 每英寸点数和每物理英寸点数是多少

访问时，我从Chrome开发者工具控制台选项卡收到此消息：

考虑使用“dppx”单元而不是“dpi”，如CSS中的“dpi”意思 每CSS英寸点数，而不是每物理英寸点数，因此不对应 到屏幕的实际“dpi”。媒体中查询表达式：仅限 屏幕和（-webkit最小设备像素比：2），不全部，不全部，仅 屏幕和（最小分辨率：192dpi），仅屏幕和（最小分辨率： 2dppx）

---

它是蓝色的，所以我认为这不是警告或错误。那么我为什么会遇到这个消息呢？我如何摆脱它，或者它只是

jsfiddle

本身的一个问题？

这与苹果视网膜显示器有关，但可能不限于此。这些显示器的像素密度比以前使用的屏幕要高，但浏览器的工作方式仍然与使用相同数量的像素一样

例如，iPhone3GS的屏幕为320 x 480像素，而iPhone4的屏幕为640 x 960像素。然而，浏览器没有以该分辨率显示网站，而是假装分辨率为320 x 480像素

这导致了CSS像素的发明。如果在CSS中指定某个对象为

width:100px

，则在正常显示器上为

100

物理像素，但在视网膜显示器上为

200

物理像素。iPhone3GS和iPhone4都有相同的

dpi

（基于假装的CSS像素），但非常不同的

dppx

（基于真实的物理像素）

您可以使用

dppx

来检测客户端何时具有高像素密度屏幕，并为其提供不同的样式，即使客户端浏览器假装没有那么高的像素密度

 .comp {
     background-image: url(image.png);
 }

 @media only screen and (min-resolution: 2dppx) {
     .comp {
         background-image: url(image@2x.png);
     }
 }

---

关于CSS像素的更多信息：

这实际上是一条Chrome调试消息，您对此无能为力，因为它基于在JSFIDLE上运行的代码。你可以过滤掉调试消息，这样你就看不到它们了，但仅此而已。应该有办法禁用这条恼人的消息。这太可怕了。只要给我设备的物理dpi，我就会成为Happy、Google和Mozilla。