如何testing视网膜显示的网页?
我编写了一个视网膜显示的网页。 我目前没有视网膜显示器。
有没有模拟器的应用程序或工具来testing网页的视网膜显示?
或者,是否有类似苹果视网膜显示器的显示器(不是苹果的MacBook或iPad)?
提前致谢。
关于:configuration黑客在Firefox
你实际上可以使用Firefox:
- 转到
about:config
- find
layout.css.devPixelsPerPx
- 将其更改为您所需的比例(正常为1,视网膜为2等)
截图:
刷新你的页面 – 繁荣,你的媒体查询已经踢了! 帽子火狐浏览器是为web开发真棒!
这是使用Firefox 21.0在Windows 7上完成的。
这个解决scheme的优点是会触发媒体查询和其他高级逻辑。 如果你没有这样做,而且你只是给每个人喂HiDPI图像,你可以放大Chrome等(或者写CSS来缩放,如果漂浮你的船)。
放大Firefox和Edge
目前在Firefox和Edge上,如果放大,会触发基于dppx的媒体查询。 所以这个更简单的方法可能已经足够了,但是请注意,这个function被报告为Firefox的一个“无法修复”的bug ,所以这可能会改变。
您可以使用Chrome浏览器检查以testing视网膜显示器是否工作,请使用本指南
- 打开
Chrome Browser
并right click
然后点击inspect element
- 在底部栏中,您可以find一些
console, search, emulation and rendering
选项卡 - 点击标签
emulation
,然后拉起如下所示的栏选项卡 - 根据
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,以完成此项任务。 否则,它不会将图像切换到较高分辨率的对应物。