設置視網膜顯示器的特定樣式表

我正在尋找一種方法來設置不同的樣式表取決於用戶設備是否是非視網膜或視網膜。我遇到了很多不同的方法，所以現在我不知道該怎麼辦。雖然在我看來，這似乎是更方便，更高效的一個：設置視網膜顯示器的特定樣式表

<link rel="stylesheet" href="myCss.css" media="screen and min-device-pixel-ratio: 2">

但我不知道它是最新的語法，將這項工作的所有現代瀏覽器（包括IE9），是有辦法改進這種方法？

來源

2012-12-19 Ilja

http://css-tricks.com/snippets/css/retina-display-media-查詢/ - 很可能你不應該有足夠的自定義樣式來保證單獨的CSS文件以及與不同文件或附加請求相關的開銷。如果您確實需要，您可能需要在服務器上完全處理它，以便客戶端獲得定製的內容。 –

IE9永遠不會在Retina顯示屏上運行......？ – Alfo

您與在link標籤的media屬性的做法是一個良好的開端。雖然我會推薦使用新的media query，您可以直接在.css內使用。

http://www.w3.org/TR/css3-mediaqueries/

你可以做到這一點像這樣：

@media only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2){ 
    /* The retina stuff here */ 
    }

Futher閱讀：http://menacingcloud.com/?c=highPixelDensityDisplays

來源

2012-12-19 15:51:17 Jelmer

在你現有的樣式表

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */ 
}

從

CSS-Tricks

來源

2012-12-19 15:49:04 Alfo

這項工作適用於-moz-和-o-瀏覽器嗎？ – Ilja

設置視網膜顯示器的特定樣式表

回答

相關問題