Question

访问jsfiddle.net时，我从Chrome开发者工具控制台标签收到此消息：

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

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

Answer 1

这与Apples Retina显示器有关，但可能不受限制。这些显示器的像素密度高于以前使用的屏幕，但浏览器的效果仍然像是具有相同的像素数。

E.g。 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

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

1 个答案: