Iphone 使用css和@媒体测试视网膜图像

我想知道如何在普通浏览器上测试一些视网膜图像css？我还尝试了我以前的代码，而不是下面的代码，并想知道它是否工作

很难判断是否加载了正确的图像，因为这是相同的图像，只是质量更好

//retina stuff
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    #home {
          background: url('bg-home-x2.png') no-repeat;
}

.shelf {
    background: url('shelf-x2.png') no-repeat top center;
    height: 111px;
    padding-bottom: 0px;
}

#pantry {
    background: url('bg-pantry-x2.png') no-repeat;
    width: 320px;
    height: 480px;
    z-index: -1;
}

#list {
    background: url('bg-cart-x2.png') no-repeat;
    width: 320px;
    height: 480px;
    z-index: -1;
    margin-top: -6px;
}
}

---

可能最简单的方法是启动一个基本服务器（即命令行上的Python web服务器）在您的开发机器上，然后在Retina设备上查看站点，并查看服务器日志以查看哪些文件被访问。

默认情况下，您不能在web浏览器中使用

-min device pixel ratio来执行此操作，因为大多数计算机/PC没有所需的像素比率值来测试它（除了更新的高端笔记本电脑/显示器）

最好的方法是使用您的目标设备或设备系列，但如果您没有这些设备或设备系列，唯一的方法是通过模拟来测试您的媒体查询，因此以下方法之一可能会有所帮助：

使用。这允许您为通用设备设置各种测试环境。它还允许您定义分辨率和像素密度的自定义设置：


它适用于Windows、Mac和Linux

还有基于Javascript的，但这不会解析CSS媒体查询，所以它只是简单地检查图像的有效性/完整性

如果您希望模拟特定的iOS设备，那么您可以使用（Xcode工具的一部分）来测试视网膜显示器，但这听起来并不适用，并且在测试本机应用程序时使用得更广泛

实际上，您可以使用Firefox：

转到“关于：配置”
查找“layout.css.devPixelsPerPx”
将其更改为所需的比率（1表示正常，2表示视网膜，等等）
刷新你的页面-砰的一声，你的媒体查询现在开始了！向Firefox致敬，因为它是web开发的绝佳工具

这是在Windows 7和Firefox 21.0上完成的。
你说的常规浏览器是什么意思？你是说在浏览器中测试移动媒体查询吗？是的，那么我该如何测试…-webkit最小设备像素比：1.5谢谢这可能有助于解决视网膜像素的故障。非常有趣，我将尝试此方法。@Blynn你最终成功地测试了吗是