css - 视网膜设备不会读取视网膜 css

Question

我正在开发一个必须支持的新网站Retina displays。经过一些 html/css@media查询、大量研究和令人难以置信的大量测试后，它仍然无法正常工作。

所以为了解决我的问题，我创建了这个基本的“我有 Retina 显示器吗？”页面。（下面的代码）：

<title>Retina Test</title>
<style type="text/css">
    body { background-color: green; }
    @media all and (-webkit-min-device-pixel-ratio : 1.5) {
        background-color:blue;
    }
</style>

我background-color只用于基本测试。可能很高兴知道，我有一些视网膜设备要测试：视网膜 macbook pro 和视网膜 iPhone 4。

谢谢转发。鲍勃

Answer 1

改变：

background-color:blue;

至：

body {background-color:blue}

那应该这样做。

Answer 2

不应该是：

body {background-color: green;}
@media all and (-webkit-min-device-pixel-ratio : 1.5) { // targets iphone retina?
    body{background-color:blue;}
}
@media all and (-webkit-min-device-pixel-ratio : 2) {   // targets macbook retina?
    body{background-color:blue;}
}

如果要改变字体颜色，正确的用法是：

body {color: green;}
@media all and (-webkit-min-device-pixel-ratio : 1.5) {
    body{color:blue;}
}

请注意，我无法测试是否@media all and (-webkit-min-device-pixel-ratio : 1.5)真的针对视网膜显示器。