什么是每 CSS 英寸点数和每物理英寸点数答案

【问题标题】：What is dots-per-CSS-inch and dots-per-physical-inch什么是每 CSS 英寸点数和每物理英寸点数
【发布时间】：2014-02-23 17:00:03
【问题描述】：

我在访问 jsfiddle.net 时收到了来自 Chrome 开发者工具控制台标签的这条消息：

考虑使用“dppx”单位而不是“dpi”，如 CSS 中“dpi”的意思每 CSS 英寸的点数，而不是每物理英寸的点数，因此不对应到屏幕的实际“dpi”。在媒体查询表达式中：仅 screen 和 (-webkit-min-device-pixel-ratio: 2)，不是全部，不是全部，只有屏幕和（最小分辨率：192dpi），只有屏幕和（最小分辨率： 2dppx)

它是蓝色的，所以我假设这不是警告或错误。那么为什么我会遇到这个消息呢？我怎样才能摆脱它，或者它只是jsfiddle 本身的问题？

【问题讨论】：

这实际上是一条 Chrome 调试消息，您无能为力，因为它基于在 jsFiddle 上运行的代码。您可以过滤掉调试消息，这样您就看不到它们了，仅此而已。
应该有办法禁用这个烦人的消息。

标签： javascript html css jsfiddle

【解决方案1】：

这与 Apple 的 Retina 显示器有关，但可能不限于此。这些显示器比以前使用的屏幕具有更高的像素密度，但浏览器的行为仍然好像它具有相同的像素数。

例如iPhone 3GS 的显示屏为 320 x 480 像素，但 iPhone 4 发布时为 640 x 960 像素。但是，浏览器并没有以该分辨率显示网站，而是假装具有 320 x 480 像素的分辨率。

这导致了 CSS 像素的发明。如果您在 CSS 中指定某物为 width:100px，则在普通显示器上将是 100 物理像素，但在视网膜显示器上将是 200 物理像素。 iPhone 3GS 和 iPhone 4 都具有相同的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 像素的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

【讨论】：

这太可怕了。只要给我设备的物理 dpi，Google 和 Mozilla 都会很高兴。