视网膜设备不会读取视网膜 css答案

【问题标题】：Retina devices won't read retina css视网膜设备不会读取视网膜 css
【发布时间】：2013-02-11 23:13:53
【问题描述】：

我正在开发一个必须支持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。

谢谢转发。鲍勃

【问题讨论】：

你尝试使用media screen ...
试过<link rel="stylesheet" media="...." href="http://foo.bar.com/stylesheet.css" />吗？
你的身体有内容吗？如果不是 - 它可能只有 0 的高度，这就是你看不到 BG 颜色的原因
是的，我使用了媒体屏幕...不，正文没有内容，但我稍微调整了一下，因为“Zoltan Toth”可能正在解释这个问题。调整版：Retina Test
您没有在媒体查询中选择任何内容。这可能是问题所在？

标签： css stylesheet retina-display

【解决方案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) 是否真的针对视网膜显示器。

【讨论】：

Shmiddty：我看不出你的代码和我的代码有什么不同。无论如何，我只是复制了您的代码并使用了它。不幸的是它仍然不起作用+为什么你的“和”蓝色和我的黑色？所以我将我的代码稍微扩展为：pastebin.com/k6AnNrs7，因为你们认为身体部分是问题所在。但你猜怎么着，我的视网膜屏幕上仍然出现绿色......
在您的媒体查询中，您没有选择任何内容。本质上你是在说Set the background-color of NOTHING to blue.
我不是在谈论背景颜色，我是在谈论这个网站的字体颜色（你和我的不同）。我稍微编辑了我的代码，添加了您的建议并将颜色更改为更简单的颜色，红色为非视网膜绿色为视网膜...<html> <head> <title>Retina Test</title> <style type="text/css"> body { background-color: red; } @media all and (-webkit-min-device-pixel-ratio: 1.5) { body { background-color:green; } } </style> </head> <body> </body> </html>
如果您尝试更改背景颜色，请使用color 属性。
更新：在当前更改下，iPhone 会显示绿屏（有效），但 Retina Macbook 不会...

【解决方案2】：

变化：

background-color:blue;

到：

body {background-color:blue}

应该可以的。

【讨论】：