如何测试用于Retina显示屏的网页? [英] How to test a webpage meant for Retina display?

查看:97
本文介绍了如何测试用于Retina显示屏的网页?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have coded a webpage meant for retina display. I currently do not have a retina display monitor.

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

Is there any simulator application or tool to test web pages for retina display?

或者,是否存在类似于Apple视网膜显示器的显示器(不是Apple的MacBook或iPad)?

Or, are there monitors(not Apple's MacBook or iPad) which are similar to Apple's retina display?

谢谢.

推荐答案

about:Firefox上的配置黑客

您实际上可以使用Firefox:

You actually can using Firefox:

  1. 转到about:config
  2. 找到layout.css.devPixelsPerPx
  3. 将其更改为所需的比例(正常时为1,视网膜时为2,等等)
  1. Go to about:config
  2. Find layout.css.devPixelsPerPx
  3. Change it to your desired ratio (1 for normal, 2 for retina, etc.)

截图:

Screenshot:

刷新页面-繁荣发展,您的媒体查询现已开始!向Firefox致敬,因为它们对Web开发具有出色的表现!

Refresh your page - boom, your media query has now kicked in! Hats off to Firefox for being awesome for web developing!

这是在Windows 7和Firefox 21.0上完成的.

This was done on Windows 7 with Firefox 21.0.

此解决方案的优点是它将触发媒体查询和其他高级逻辑.如果您不这样做,而只是向所有人提供HiDPI图像,则可以使用Chrome等进行放大(或者编写CSS进行缩放,以防您漂浮在船上).

The advantage of this solution is that it will trigger media queries and other advanced logic. If you're not doing that, and you're just feeding everyone the HiDPI images, you can just zoom in with Chrome etc (or write CSS to zoom for you, if that floats your boat).

在Firefox&上缩放边缘

当前在Firefox和Edge上,如果进行缩放,则会触发基于dppx的媒体查询.因此,这种简单的方法可能就足够了,但是请注意,该功能被报告为无法修复" bug (对于Firefox),因此可能会更改.

Currently on Firefox and Edge, if you zoom it triggers dppx-based media queries. So this easier approach may be sufficient, but be aware that the functionality is reported as a "won't fix" bug for Firefox, so this could change.

这篇关于如何测试用于Retina显示屏的网页?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆