html - 如何在没有实际 Retina 显示屏的情况下在 Windows 上测试 Retina 网站？

Question

有没有一种方法可以在 Windows 上模拟 Retina 显示屏来测试 HiDPI 显示屏(例如 Retina)的网站？

我在标准的 24"1920x1080 显示器上运行 Windows。昨晚我在 friend 的全新 15"Retina MacBook Pro 上查看了我的网站，图形看起来很模糊(比普通的 15 英寸 MacBook 差得多)，同时字体非常清晰锐利，由于直接比较，使 Logo 看起来更糟。

我已按照本教程使我的网站 Retina 准备就绪:

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

我使用了 retina.js 方法，因为我没有任何背景图像。

我有什么方法可以测试这是否真的有效？显然，我可以让我的 friend 使用他的 Retina Notebook，但这对我来说不是一个可行的工作流程。我希望能够在我自己的环境中至少粗略地测试网站的 Retina 兼容性。

Answer 1

about:config hack on Firefox

您实际上可以使用 Firefox:

1. 转到“关于:配置”
2. 找到“layout.css.devPixelsPerPx”
3. 将其更改为您想要的比例(1 代表正常，2 代表视网膜，等等。-1 似乎是默认值。)

截图:


_{(来源:staticflickr.com)}

刷新您的页面 - 砰，您的媒体查询现已启动!向 Firefox 致敬，因为它非常适合 Web 开发!请注意，现在不仅网站大小将增加一倍，Firefox UI 也将增加一倍。这种倍增或缩放是必要的，因为这是您能够在标准像素比屏幕上检查所有像素的唯一方法。

这在带有 Firefox 21.0 的 Windows 7 以及带有 Firefox 27.0.1 的 Mac OS X 上运行良好。

如果您不使用媒体查询和其他更高级的逻辑(即您向每个人提供 HiDPI 图像)，您只需将浏览器放大到 200%。 Chrome 模拟是一个有用的工具，它会启动媒体查询，但由于它会阻止缩放，因此您无法检查图像质量。

在 Firefox 和 Edge 上缩放

目前在 Firefox 和 Edge 上，如果缩放会触发基于 dppx 的媒体查询。因此，这种更简单的方法可能就足够了，但请注意，该功能被报告为“无法修复”bug对于 Firefox，所以这可能会改变。