如何在没有实际Retina显示屏的情况下在Windows上测试Retina网站？

Question

有没有办法模拟Windows上的Retina显示屏来测试网站的HiDPI显示器,如Retina？

我在一台标准的24英寸1920x1080显示器上运行Windows.昨晚我在朋友全新的15英寸Retina MacBook Pro上查看了我的网站,图形显得模糊(远比普通的15英寸MacBook差),而字体是超级清晰锐利,由于直接比较,使徽标显得更加糟糕.

我已按照本教程使我的网站Retina准备好了:

我使用了retina.js方法,因为我没有任何背景图像.

我有什么方法可以测试它是否真的有用吗？显然我可以让我的朋友使用他的Retina笔记本,但这对我来说不是一个可行的工作流程.我希望能够在我自己的环境中至少大致测试网站的Retina兼容性.

Answer 1

about:配置hack on Firefox

你实际上可以使用Firefox:

截图:

刷新您的页面 - 繁荣,您的媒体查询现已开始!为了网络开发真棒而向Firefox致敬!抬头,不仅网站现在将提升到两倍大小,Firefox UI也将增加一倍.这种倍增或缩放是必要的,因为这是您能够检查标准像素比率屏幕上所有像素的唯一方法.

这适用于使用Firefox 21.0的Windows 7,以及使用Firefox 27.0.1的Mac OS X.

如果您没有使用媒体查询和其他更高级的逻辑(即您向所有人提供HiDPI图像),您可以使用浏览器放大200%.Chrome模拟是一种有用的工具,它可以解决媒体查询问题,但由于它可以防止缩放,因此无法检查图像质量.

放大Firefox和Edge

目前在Firefox和Edge上,如果你缩放它会触发基于dppx的媒体查询.因此,这种更简单的方法可能就足够了,但请注意,该功能被报告为Firefox 的"无法修复" 错误,因此可能会发生变化.

Answer 2

无论如何,不再需要Firefox hack - 很难合作.

感谢Google开发团队!!:)

Answer 3

在chrome中你可以通过以下方式完成:

1)打开Chrome开发者工具,然后单击小"齿轮"图标. 在此输入图像描述

2)然后在控制台抽屉中选择"显示'仿真'视图." 在此输入图像描述

3)最后,在Developer Tools中打开"console drawer",然后选择Emulation.设置" 模拟"屏幕并将" 设备像素比"设置为2.5.

在此输入图像描述

Answer 4

据我所知,除了购买视网膜设备之外,这是不可能的.

一些解决方法

建议在这里:
- 如果你翻倍图像尺寸和比例仍然相同,那么你就非常安全了.如果您没有要测试的视网膜显示器,请从像素比媒体查询切换到基于宽度的内容.
- 高分辨率内容测试和故障排除
  http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html
如何在没有Retina MacBook Pro的情况下开发HiDPI("Retina")
http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/
WordPress Retina Images
http://wpmu.org/wordpress-retina/

不太相关

Answer 5

使用谷歌浏览器模拟视网膜(HiDPI)显示的当前方法

1)在网页上" 右键单击 ",然后选择" 检查 "以打开Chrome的开发人员工具

2)单击" 切换设备模式 "图标

3)在屏幕顶部的设备下拉框中,选择" 具有HiDPI屏幕的笔记本电脑 "

4)您现在可以查看网站在Retina aka HiDPI屏幕上的外观