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

不应该是：

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)是否真正针对视网膜显示。

Answer 2

变化：

background-color:blue;

为：

body {background-color:blue}

应该这样做。

Retina设备不会读取视网膜css

2 个答案: