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

有没有一种方法可以在Windows上模拟Retina显示屏，以测试网站上是否有HiDPI显示屏（例如Retina）？

我在标准的24英寸1920x1080显示器上运行Windows。超级清晰明了，由于直接比较，徽标显得更糟。

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

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

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

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

about：在Firefox上配置黑客

您实际上可以使用Firefox：

1. 转到“关于：配置”
2. 找到“ layout.css.devPixelsPerPx
3. 将其更改为所需的比率（正常时为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的“无法修复”错误，因此可能会发生变化。

在谷歌浏览器版本“ 33.0.1720.0 Canary”中，您现在可以使用大量参数（例如“设备像素比率”，“ android字体指标”和“视口仿真”）模拟iPhone5等设备。

不再需要Firefox hack-无论如何都很难使用。

感谢Google开发团队！！:)

在chrome中，您可以执行以下操作：

1）打开Chrome开发者工具，然后单击小“齿轮”图标。

2）然后选择“在控制台抽屉中显示“仿真”视图”。

3）最后，在开发人员工具中打开“控制台抽屉”，然后选择“仿真”。设置模拟屏幕，并将设备像素比率设置为2.5。

据我所知，除了购买视网膜设备，这是不可能的。

一些解决方法

• 建议在这里：

  • 如果将图像尺寸加倍并且比例保持不变，则几乎可以保证安全。如果没有可测试的视网膜显示器，请从像素比率媒体查询切换到基于宽度的内容。

  • 测试和解决高分辨率内容
    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视网膜图片
  http://wpmu.org/wordpress-retina/

不太相关

• 如何创建一个响应式，视网膜就绪的网站

• 如何为Apple的Retina显示器设计
  http://www.studiopress.com/design/retina-display-design.htm

• 建立用于视网膜显示器的网站：与像素成为朋友
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-makeing-friends-with-pixels

• 如何建立一个视网膜展示网站？

• 如何准备视网膜？

使用Google Chrome模拟视网膜（HiDPI）显示的当前方法

1）在网页上单击“右键”，然后选择“检查”以打开Chrome的开发者工具

2）点击“切换设备模式”图标

3）在屏幕顶部的设备下拉框中，选择“带有HiDPI屏幕的笔记本电脑”

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

我使用图像大小调整库来动态创建图像。对于2x版本，我在调试过程中添加了动态水印-这使您很容易查看高分辨率图像是否实际显示。发现它非常有帮助。

其工作方式将有所不同，因此不包括示例代码。

Google Chrome版本80

1. 打开开发人员工具 ctrl-shift j
2. 通过单击左上角的平板电脑/电话图标来切换设备工具栏（如果单击它会变成蓝色）

3. 现在，视口上方应有一个工具栏。单击右上角的选项图标（3个点），然后选择添加设备像素比率选项。

4. 现在，您应该在工具栏上看到该选项。在这里，您可以切换到1x，2x或3x。

5. 测试时，请确保每次更改像素比率时都按下刷新按钮。如果将比率设置为2x，然后再将其设置为较低，则您将看不到任何更改，因为如果浏览器已经获取2x或更高，则浏览器将不会获取1x资产。

我不知道这是否太简单，我按ctrl并滚动并触发媒体查询。我已经在bugzilla中检查了它，并且可以正常工作。我不确定svg缩放，因为它看起来很模糊，但这是svg图像。

如果您有Mac（或Mac osx虚拟机），则可以将ios模拟器与xcode一起使用。它确实会炸开两倍大的窗口，因此它在现实生活中的显示效果不尽如人意，但会清晰显示图像是否模糊。