使用css和@media测试视网膜图像

Question

我想知道如何在常规浏览器上测试一些视网膜图像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;
}
}

Answer 1

你实际上可以使用Firefox：

1. 转到“about：config”
2. 找到“layout.css.devPixelsPerPx
3. 将其更改为您想要的比例（1为正常，2为视网膜等）

刷新页面 - 繁荣，您的媒体查询现已开始！为了网络开发真棒而向Firefox致敬！

这是在Windows 7上使用Firefox 21.0完成的。

Answer 2

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

Answer 3

默认情况下，您无法在使用-min-device-pixel-ratio的网络浏览器中执行此操作 - 因为大多数计算机/ PC没有所需的像素比值来测试它（除了较新的高端笔记本电脑/显示器）

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

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

   

   适用于Windows，Mac和Linux。

2. 还有基于Javascript的Web Retina Emulator，但这不会解析CSS媒体查询，因此只是简单地检查图像的有效性/完整性。

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