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

Question

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

考虑使用'dppx'单位而不是'dpi',因为在CSS中'dpi'表示每CSS英寸点数,而不是每物理英寸点数,因此不对应于屏幕的实际'dpi'.在媒体查询表达式中:只有屏幕和(-webkit-min-device-pixel-ratio:2),不是全部,不是全部,只有屏幕和(最小分辨率:192dpi),只有屏幕和(最小分辨率:2dppx)

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

Answer 1

这与Apples Retina显示器有关,但可能不受限制.这些显示器具有比以前使用的屏幕更高的像素密度,但浏览器仍然表现得像具有相同数量的像素.

例如,iPhone 3GS的显示器尺寸为320 x 480像素,但iPhone 4的尺寸为640 x 960像素.但是,浏览器不是以该分辨率显示网站,而是假设分辨率为320 x 480像素.

这导致了CSS像素的发明.如果您指定某些内容width:100px在CSS中,那么它将是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