什么是dot-per-CSS-inch和dots-per-physical-inch [英] What is dots-per-CSS-inch and dots-per-physical-inch

问题描述

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

$ b考虑使用'dppx'单位而不是'dpi'，如在CSS'dpi'意味着
dots-per-CSS-inch，而不是dots-per-physical-英寸，所以不对应
到屏幕的实际'dpi'。在媒体查询表达式中：只有
屏幕和（-webkit-min-device-pixel-ratio：2），不是全部，而是全部，只有
屏幕和（最低分辨率：192dpi）和（min-resolution：
2dppx）

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

解决方案

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

例如。 iPhone 3GS有一个320 x 480像素的显示器，但iPhone 4发布640 x 960像素。然而，不是在该分辨率显示网站，浏览器假装有一个320 x 480像素的分辨率。

这导致CSS像素的发明。如果你在CSS中指定了 width：100px ，那么在正常显示器上的物理像素将会是 100 c $ c> 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（[e-mail]）; 
} 
} 
  

在CSS像素上的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

I've received this message from Chrome Developer Tools console tab when access jsfiddle.net:

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)

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 jsfiddle itself?

解决方案

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.

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.

This leads on to the invention of CSS-pixels. If you specify that something is width:100px in CSS it will be 100 physicals pixels on a normal display but 200 physical 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).

You can use dppx to 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.

 .comp {
     background-image: url(image.png);
 }

 @media only screen and (min-resolution: 2dppx) {
     .comp {
         background-image: url([e-mail]);
     }
 }

More info here on CSS-pixels: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

这篇关于什么是dot-per-CSS-inch和dots-per-physical-inch的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！