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

Question

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

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

我已按照本教程使我的网站Retina准备就绪：

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

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

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

Answer 1

关于：Firefox上的配置hack

你实际上可以使用Firefox：

1. 转到“about：config”
2. 找到“layout.css.devPixelsPerPx
3. 将其更改为您想要的比例（正常为1，视网膜为2，等等.1似乎是默认值。）

<强>截图：



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

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

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

放大Firefox＆amp;边缘

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

Answer 2

在Google Chrome版“33.0.1720.0 Canary”中，您现在可以emulate devices like iPhone5 and others with a great set of parameters like "Device pixel ratio", "android font metrics" and "Viewport emulation"。

不再需要Firefox黑客攻击 - 无论如何都难以使用。

感谢Google开发团队！ ！:)

Answer 3

在Chrome中你可以通过以下方式完成：

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

---

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

---

3）最后，在Developer Tools中打开“console drawer”，然后选择 Emulation 。设置模拟屏幕并将设备像素比率设置为2.5。

Answer 4

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

一些解决方法

• Suggested here:

  •   

    如果你加倍图像尺寸和比例仍然相同，   你非常安全。如果您没有视网膜显示器进行测试   用，从像素比媒体查询切换到某事   宽度为基础的。

  • 高分辨率内容的测试和故障排除
    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图像
  http://wpmu.org/wordpress-retina/

不太相关

• How to Create a Responsive, Retina-ready Website

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

• 为视网膜显示器构建网站：与像素结交朋友
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• How to develop a website for retina display?

• how to get retina-ready?

Answer 5

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

在网页上

1）“右键单击”，然后选择“检查”以打开Chrome的开发人员工具

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

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

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

Answer 6

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

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

Answer 7

Google Chrome版本80

1. 打开开发者工具ctrl-shift j
2. 通过点击左上方的平板电脑/电话图标来切换设备工具栏（如果单击，它将变为蓝色）

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

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

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

Answer 8

我不知道这是否太简单，我按下ctrl并滚动它会触发媒体查询。 我在bugzilla中检查了它，它的工作原理。 我不确定svg缩放，因为它看起来很模糊，但它是svg图像。

Answer 9

如果您有mac（或mac osx虚拟机），则可以将ios仿真器与xcode一起使用。它会把窗户炸成两倍大，所以它不是它在现实生活中的表现，但会清楚地显示你的图像是否模糊不清。