什么是每英寸点数和每英寸点数

在访问jsfiddle.net时,我从Chrome开发者工具控制台标签中收到了此消息:

考虑使用“dppx”单位而不是“dpi”,因为在CSS中,“dpi”是指每英寸点数,而不是每英寸点数,因此不符合屏幕的实际“dpi”。 在媒体查询expression式中:只有屏幕和(-webkit-min-device-pixel-ratio:2),不是全部,不是全部,只有屏幕和(最小分辨率:192dpi),只有屏幕和(最小分辨率:2dppx)

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

这与苹果视网膜显示器相关,但也许不限于此。 这些显示器具有比以前使用的屏幕更高的像素密度,但浏览器仍然具有相同数量的像素。

例如iPhone 3GS具有320×480像素的显示器,而iPhone 4则以640×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