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

Question

我正在开发一个必须支持Retina 显示屏 的新网站。经过一些 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

不应该是:

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 和 (-webkit-min-device-pixel-ratio : 1.5) 是否真的针对视网膜显示器。