为视网膜显示器设置特定的样式表

Question

我正在寻找一种方法来设置不同的样式表，具体取决于用户设备是非视网膜还是视网膜。我遇到了很多不同的方法，所以现在我不知道该做什么。虽然在我看来这似乎更简单，更有效：

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

但我不确定它是最新的语法，这适用于所有现代浏览器（包括ie9），有没有办法改进这种方法？

Answer 1

在您现有的样式表中

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

来自

CSS-Tricks

Answer 2

使用media标记中的link属性的方法是一个良好的开端。虽然我建议您使用可以直接在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 */
    }

进一步阅读：http://menacingcloud.com/?c=highPixelDensityDisplays