2

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

3 回答 3

10

您实际上可以使用 Firefox：

  1. 转到“关于：配置”
  2. 找到“layout.css.devPixelsPerPx
  3. 将其更改为所需的比例（1 表示正常，2 表示视网膜等）

刷新您的页面 - 繁荣，您的媒体查询现在开始了！向 Firefox 致敬，因为它非常适合 Web 开发！

这是在带有 Firefox 21.0 的 Windows 7 上完成的。

于 2013-06-21T05:08:21.153 回答
1

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

于 2013-05-10T15:09:30.063 回答
1

默认情况下，您不能在 Web 浏览器中使用-min-device-pixel-ratio- 因为大多数计算机/PC 没有测试所需的像素比值（较新的高端笔记本电脑/显示器除外）。

最好的方法是使用您定位的设备或设备系列，但如果您没有它们，唯一的方法是通过emulation测试您的媒体查询，因此以下其中一项可能会有所帮助：

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

    在此处输入图像描述

    它适用于 Windows、Mac 和 Linux。

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

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

于 2013-05-11T12:22:08.020 回答