什麼是點每CSS英寸和點每物理英寸

我已經收到了來自Chrome開發者工具的控制檯選項卡時該信息訪問jsfiddle.net：什麼是點每CSS英寸和點每物理英寸

考慮使用「DPPX」單位代替'dpi'，如CSS'dpi'意思是 dots-per-CSS-inch，不是每物理英寸的點數，因此不對應到屏幕的實際「dpi」。在媒體查詢表達式中：只有屏幕和（-webkit-min-device-pixel-ratio：2），並非全部，並非全部，只有屏幕和（最小分辨率：192dpi）僅，僅屏幕和（最小分辨率： 2dppx）

它是藍色的，所以我假設這不是一個警告或錯誤。那麼，爲什麼我會遇到這個消息呢？我該如何擺脫它，或者它只是jsfiddle本身的問題？

來源

2014-02-23 Felix

它實際上是一個Chrome的調試消息，並沒有太多的，因爲它是基於對正在運行的jsfiddle的代碼，你可以做些什麼。您可以過濾掉調試消息，以免看到它們，但這就是它。 – j08691

應該有一種方法來禁用這個煩人的消息。 –

這與蘋果視網膜顯示屏相關，但可能沒有限制。這些顯示屏的像素密度比以前使用的屏幕要高，但瀏覽器仍然具有相同數量的像素。

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([email protected]); 
    } 
}

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

來源

2014-02-27 15:00:40 Mathias

這太可怕了。只要給我設備的物理dpi，我就會很開心，Google和Mozilla。 – trusktr

什麼是點每CSS英寸和點每物理英寸

回答

相關問題