如何测试用于 Retina 显示的网页？答案

【问题标题】：How to test a webpage meant for Retina display?如何测试用于 Retina 显示的网页？
【发布时间】：2012-08-27 22:28:28
【问题描述】：

我编写了一个用于视网膜显示的网页。我目前没有视网膜显示器。

是否有任何模拟器应用程序或工具来测试网页的视网膜显示？

或者，是否有类似于苹果视网膜显示器的显示器（不是苹果的 MacBook 或 iPad）？

提前致谢。

【问题讨论】：

还有高清显示器和视网膜显示器有什么相似之处吗？
How to test a website for Retina on Windows without an actual Retina display?的可能重复

【解决方案1】：

GitHub 上有一个 JavaScript Web Retina Emulator。

您还可以使用 Opera Mobile Emulator 测试自定义分辨率。有一个explanation of how to do it here。

如果您有一台较旧的 Apple 计算机（没有视网膜显示器），您可以使用 XCode 中的一个工具 Quartz Debug 模拟视网膜显示器。同样在 XCode 中，您可以使用 iOS 模拟器测试带有视网膜显示器的 iOS 设备。

【讨论】：

【解决方案2】：

你可以添加这个 css。一切看起来都是 2 倍的大小，但如果有任何问题，它很容易发现。 Javascript Web Retina Emulator 对我不起作用（在 Safari 中模糊）

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

缩放：200% 适用于 webkit，-moz 适用于 firefox，因此 Safari/Chrome/Firefox 这将起作用，不确定 IE。

如果你应用 -webkit-transform: scale(2) 东西会看起来很模糊，所以你需要使用 zoom: 200%;

【讨论】：

正如 Daniel 所说，单独的代码无法解决问题，因为它不会触发将图像切换到更高分辨率对应物的媒体查询。如果你不使用 andrewb 的改变像素比率的解决方案，图像会看起来很模糊。

【解决方案3】：

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

仅此代码无法解决问题。如果您使用媒体查询，则应将像素比切换为 1，而不是 1.5 或 2，以达到目的。否则它不会将图像切换到更高分辨率的对应物。

【讨论】：

【解决方案4】：

关于：Firefox 上的配置破解

您实际上可以使用 Firefox：

截图：

_{（来源：staticflickr.com）}

刷新您的页面 - 繁荣，您的媒体查询现已启动！向 Firefox 致敬，因为它在 Web 开发方面表现出色！

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

此解决方案的优势在于它会触发媒体查询和其他高级逻辑。如果您不这样做，而只是为每个人提供 HiDPI 图像，您可以使用 Chrome 等放大（或编写 CSS 为您缩放，如果这会让您的船浮起来的话）。

在 Firefox 和 Edge 上缩放

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

【讨论】：

在我的 Firefox 版本 24 上，默认值为 -1，因此只需将其设置为 -2。或者设置为 2 实现反向效果，也很有用。
这很奇怪，我的（OS X 10.7 和 Win 7 上的 FF 24）不接受 -2 的值，或者至少没有区别。我的默认值实际上是 -1，我想知道这是否意味着没有缩放计算之类的。
在 FF 31 / Win7 上，将其设置为 (+) 1.5 效果很好，具体取决于您的样式表，而不会使窗口太大。虽然默认值为 -1，但将其设置为负值似乎不会触发更高的 DPI 显示。
@nickb 请记住，1.5 小于标准 Retina 像素/像素比率 2，因此可能不会触发媒体查询。
@andrewb 是的，Retina 需要 2 倍。取决于您是否需要超过默认像素比率或特定目标的任何内容。如果您的高 DPI 图像更通用（即任何 >1.0 且不是专门的 Retina 设备），那么 1.5 就足够了，如果没有，则根据需要提高。

【解决方案5】：

您可以通过 Chrome 浏览器检查视网膜显示是否正常工作，请使用本指南

【讨论】：

【解决方案6】：

只需在 Firefox 或 Chrome 中进入响应模式，然后编辑分辨率以选择：带 HiDPI 屏幕的笔记本电脑。它会做的工作！ ;)

【讨论】：