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

Question

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

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

或者，是否有与Apple的视网膜显示器相似的显示器（不是Apple的MacBook或iPad）？

提前致谢。

Answer 1

关于：Firefox上的配置hack

你实际上可以使用Firefox：

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

<强>截图：



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

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

此解决方案的优势在于它将触发媒体查询和其他高级逻辑。如果您没有这样做，并且您只是为每个人提供HiDPI图像，您可以使用Chrome等进行放大（或者编写CSS来缩放，如果它漂浮在您的船上）。

放大Firefox＆amp;边缘

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

Answer 2

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

1. 打开Chrome Browser和right click，然后点击inspect element
2. 在底部栏中，您会找到一些console, search, emulation and rendering
标签
3. 点击标签emulation，然后向上拉条形标签，如下所示
4. 根据left上的菜单进行调整，调整设备，屏幕等。

请查看此文章了解详细指南：http://www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html

Answer 3

GitHub上有一个JavaScript Web Retina Emulator。

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

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

Answer 4

您可以添加此CSS。一切都看起来大小只有2倍，但如果有任何问题，很容易发现。 Javascript Web Retina模拟器不能为我工作（在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），事情看起来会模糊，因此您需要使用缩放：200％;

Answer 5

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

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

Answer 6

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