javascript 什么是每 CSS 英寸点数和每物理英寸点数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21971331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is dots-per-CSS-inch and dots-per-physical-inch
提问by Felix
I've received this message from Chrome Developer Tools console tab when access jsfiddle.net:
访问jsfiddle.net时，我从 Chrome 开发人员工具控制台选项卡收到此消息：
Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)
考虑使用“dppx”单位而不是“dpi”，因为在 CSS 中，“dpi”表示每 CSS 英寸的点数，而不是每物理英寸的点数，因此与屏幕的实际“dpi”不对应。在媒体查询表达式中：only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)
It's in blue color so I'm assuming that's not a warning or error. So why did I encounter this message? How can I get rid of it or it's just a problem with jsfiddleitself?
它是蓝色的，所以我假设这不是警告或错误。那么为什么我会遇到这个消息呢？我怎样才能摆脱它，或者这只是它jsfiddle本身的问题？
回答by Mathias
This is related, but perhaps not limited, to Apples Retina displays. These displays have a higher pixel density than previously used screens but the browser still acts as if it has the same number of pixels.
这与 Apples Retina 显示器有关，但可能不限于此。这些显示器比以前使用的屏幕具有更高的像素密度，但浏览器仍然表现得好像它具有相同数量的像素。
E.g. the iPhone 3GS had a display with 320 x 480 pixels but the iPhone 4 was released with 640 x 960 pixels. However, instead of showing website at that resolution the browser pretended to have a resolution 320 x 480 pixels.
例如，iPhone 3GS 的显示屏为 320 x 480 像素，但 iPhone 4 发布时为 640 x 960 像素。但是，浏览器并没有以该分辨率显示网站，而是假装具有 320 x 480 像素的分辨率。
This leads on to the invention of CSS-pixels. If you specify that something is width:100pxin CSS it will be 100physicals pixels on a normal display but 200physical pixels on a retina display. A iPhone 3GS and iPhone 4 both have the same dpi(as it is based on pretend CSS-pixels) but very different dppx(as that is based on the real physical pixels).
这导致了 CSS 像素的发明。如果您width:100px在 CSS 中指定某些内容，它将是100普通显示器200上的物理像素，但视网膜显示器上的物理像素。iPhone 3GS 和 iPhone 4 都有相同的dpi（因为它基于假装 CSS 像素）但非常不同dppx（因为它基于真实的物理像素）。
You can use dppxto detect when a client has a high pixel density screen and serve it a different styling even if the client's browser pretends like it doesn't have that high pixel density.
您可以使用dppx来检测客户端何时具有高像素密度屏幕并为其提供不同的样式，即使客户端的浏览器假装它没有那么高的像素密度。
.comp {
background-image: url(image.png);
}
@media only screen and (min-resolution: 2dppx) {
.comp {
background-image: url([email protected]);
}
}
More info here on CSS-pixels: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
有关 CSS 像素的更多信息：https: //developer.mozilla.org/en-US/docs/Web/CSS/resolution
