如何testing视网膜显示的网页?

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

有没有模拟器的应用程序或工具来testing网页的视网膜显示?

或者,是否有类似苹果视网膜显示器的显示器(不是苹果的MacBook或iPad)?

提前致谢。

关于:configuration黑客在Firefox

你实际上可以使用Firefox:

  1. 转到about:config
  2. findlayout.css.devPixelsPerPx
  3. 将其更改为您所需的比例(正常为1,视网膜为2等)

截图:

刷新你的页面 – 繁荣,你的媒体查询已经踢了! 帽子火狐浏览器是为web开发真棒!

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

这个解决scheme的优点是会触发媒体查询和其他高级逻辑。 如果你没有这样做,而且你只是给每个人喂HiDPI图像,你可以放大Chrome等(或者写CSS来缩放,如果漂浮你的船)。

放大Firefox和Edge

目前在Firefox和Edge上,如果放大,会触发基于dppx的媒体查询。 所以这个更简单的方法可能已经足够了,但是请注意,这个function被报告为Firefox的一个“无法修复”的bug ,所以这可能会改变。

您可以使用Chrome浏览器检查以testing视网膜显示器是否工作,请使用本指南

  1. 打开Chrome Browserright click然后点击inspect element
  2. 在底部栏中,您可以find一些console, search, emulation and rendering选项卡
  3. 点击标签emulation ,然后拉起如下所示的栏选项卡
  4. 根据left的菜单调整,调整设备,屏幕等

请查看这篇文章的详细指南: http : //www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html

在GitHub上有一个JavaScript Web视网膜模拟器 。

您也可以使用Opera Mobile Emulator来testing自定义分辨率。 有一个解释如何在这里做到这一点 。

如果你有一个旧的苹果电脑(没有视网膜显示器),你可以用XCode里的Quartz Debug工具来模拟视网膜显示。 同样在XCode中,您可以使用iOS模拟器testing带有视网膜显示器的iOS设备。

你可以添加这个CSS。 一切都会看起来大小的2倍,但如果有任何问题,它可以很容易地发现。 Javascriptnetworking视网膜模拟器没有为我工作(在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%;

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

单单这个代码就不能做到这一点。 如果您正在使用媒体查询,则应该将像素比例切换为1,而不是1.5或2,以完成此项任务。 否则,它不会将图像切换到较高分辨率的对应物。