如何测试用于Retina显示的网页？
San*_*254 67 webpage retina-display
我编写了一个用于视网膜显示的网页.我目前没有视网膜显示屏.
是否有任何模拟器应用程序或工具来测试网页的视网膜显示？
或者,是否有与Apple的视网膜显示器类似的显示器(不是Apple的MacBook或iPad)？
提前致谢.
and*_*ewb 106
about:配置hack on Firefox
你实际上可以使用Firefox:
- 去
about:config - 找
layout.css.devPixelsPerPx - 将其更改为您想要的比例(1为正常,2为视网膜等)
截图:
刷新您的页面 - 繁荣,您的媒体查询现已开始!为了网络开发真棒而向Firefox致敬!
这是在Windows 7上使用Firefox 21.0完成的.
该解决方案的优点是它将触发媒体查询和其他高级逻辑.如果您没有这样做,并且您只是向每个人提供HiDPI图像,您可以使用Chrome等放大(或者编写CSS来缩放,如果它漂浮在您的船上).
放大Firefox和Edge
目前在Firefox和Edge上,如果你缩放它会触发基于dppx的媒体查询.因此,这种更简单的方法可能就足够了,但请注意,该功能被报告为Firefox 的"无法修复" 错误,因此可能会发生变化.
- 在我的Firefox版本24上,默认值为-1,因此只需将其设置为-2即可.或者将其设置为2以获得反向效果,这也很有用. (7认同)
- 这很奇怪,我的(OS X 10.7和Win 7上的FF 24)不接受-2的值,或者至少没有区别.我的默认值实际上是-1,我想知道这是否意味着没有缩放计算或其他东西. (3认同)
- 在FF 31/Win7上,根据样式表将其设置为(+)1.5可以很好地工作,而不会使窗口太大.虽然默认值为-1,但将其设置为负值似乎不会触发更高的DPI显示. (2认同)
小智 20
您可以使用Chrome浏览器查看视网膜显示屏是否正常工作,请使用本指南
- 打开
Chrome Browser和right click然后单击inspect element - 在底部栏中,您会找到一些标签
console, search, emulation and rendering - 单击选项卡
emulation,然后向上拉条形选项卡,如下所示 - 根据菜单
left调整,调整设备,屏幕等.
请查看此文章以获取详细指南:http://www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html
- 如果在步骤2中看不到按钮,请在开发人员控制台仍然打开的情况下按Escape键.这会切换底部的标签栏. (4认同)
GitHub 上有一个 JavaScript Web Retina 模拟器。
您还可以使用 Opera Mobile Emulator 来测试自定义分辨率。这里有关于如何执行此操作的说明。
如果您有一台较旧的 Apple 计算机（没有视网膜显示屏），您可以使用 XCode 内的工具 Quartz Debug 来模拟视网膜显示屏。另外，在 XCode 中，您可以使用 iOS 模拟器测试具有视网膜显示屏的 iOS 设备。
| 归档时间： |
|
| 查看次数： |
59671 次 |
| 最近记录： |