有没有一种方法可以在Windows上模拟Retina显示屏,以测试网站上是否有HiDPI显示屏(例如Retina)?

我在标准的24英寸1920x1080显示器上运行Windows。昨晚,我在 friend 全新的15英寸Retina MacBook Pro上检查了自己的网站,图形看上去像是模糊的(比普通的15英寸MacBook差得多),而字体却是 super 清晰明了,由于直接比较,徽标显得更糟。

我已按照本教程进行操作,以使我的网站Retina就绪:

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

由于没有任何背景图片,因此我使用了retina.js方法。

我有什么办法可以测试这是否真的有效?显然,我可以请我的 friend 使用他的Retina笔记本,但这对我来说并不可行。我希望能够至少在我自己的环境中大致测试网站与Retina的兼容性。

最佳答案

关于:在Firefox上配置hack

您实际上可以使用Firefox:

  • 转到“关于:配置”
  • 查找“layout.css.devPixelsPerPx
  • 将其更改为所需的比例(正常时为1,视网膜时为2,以此类推。默认为-1。)

  • 屏幕截图:

    刷新页面-繁荣发展,您的媒体查询现已开始!向Firefox致敬,因为它们对Web开发非常有用!抬头,不仅网站现在将扩大到两倍大小,而且Firefox UI也将增加一倍。必须加倍或缩放,因为这是您能够检查标准像素比率屏幕上所有像素的唯一方法。

    在装有Firefox 21.0的Windows 7上以及在装有Firefox 27.0.1的Mac OS X上都可以正常工作。

    如果您不使用媒体查询和其他更高级的逻辑(即,向所有人提供HiDPI图像),则只需使用浏览器将其放大200%。 Chrome仿真器是一种有用的工具,它可以插入媒体查询中,但是由于它会阻止缩放,因此无法检查图像质量。

    放大Firefox和Edge上

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

    关于html - 如何在没有实际Retina显示屏的情况下在Windows上测试Retina网站?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15551287/

    10-12 12:18