如何测试视网膜Windows上的网站，而实际的Retina显示屏？(How to test a we

有没有一种方法来模拟Windows上的Retina显示屏，以测试HiDPI显示，如视网膜网站？

我一个标准的24" 上运行Windows的1920×1080的显示器。昨晚我检查了我的网站上朋友们全新的15" 的Retina MacBook Pro和图形看起来都模糊（远远超过定期15英寸的MacBook更糟），而字体是超清晰和锐利，使标志看起来更糟糕，因为直接比较。

我按照这个教程，使我的网站视网膜准备：

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

我用retina.js的方法，因为我没有任何背景图片。

有没有什么办法，我测试此实际工作？ 很显然，我可以问我的朋友用他的视网膜笔记本电脑，但是这不是一个可行的工作流程给我。 我希望能够为视网膜的兼容性，在我自己的环境中至少粗略测试网站。

Answer 1:

about：config中黑客在Firefox

实际上，你可以使用Firefox：

1. 进入 “about：config中”
2. 查找“layout.css.devPixelsPerPx
3. 它更改为所需的比例（1用于正常，2为视网膜等-1似乎是默认值。）

截图：

刷新页面 - 蓬勃发展，媒体查询已经踢！ 脱帽向火狐是真棒为Web开发！ 抬起头，不仅会在网站现在被提升到两倍，Firefox的用户界面也将成倍增长。 这加倍或缩放是必要的，因为这是你就可以检查标准的像素比例的屏幕上的所有像素的唯一途径。

这工作正常的Windows 7与Firefox 21.0，并在Mac OS X与Firefox 27.0.1。

如果你没有使用媒体查询等更先进的逻辑（即你硬塞给大家HiDPI图像），你可以放大你的浏览器到200％。 在Chrome仿真是一个有用的工具，以及它在媒体查询踢，而是因为它可以防止变焦，您不能检查图像质量。

缩放在Firefox和Edge

目前在Firefox和边缘，如果你放大它触发基于DPPX媒体查询。 因此，这更简单的方法可能是足够的，但要注意的是，功能报告为“不修复” 错误的Firefox，所以这可能会改变。

Answer 2:

在谷歌Chrome浏览器版本“33.0.1720.0金丝雀”，你现在可以模拟像iPhone5的设备和其他人与一个伟大的一套像“设备像素比”，“Android的字体规格”和“视口仿真”参数 。

没有必要为火狐砍了 - 辛苦的工作，反正。

由于谷歌开发团队！ ！:)

Answer 3:

在Chrome中，你可以做到这一点：

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

---

2）然后选择“显示‘仿真’在控制台抽屉看法。”

---

3）最后，打开了在开发者工具的“控制台抽屉”，并选择仿真 。 设置模拟屏和设备像素比例设定为2.5。

Answer 4:

据我所知，这是不可能的其他比购买视网膜设备。

一些解决方法

• 这里建议：

  • 如果您弯了腰的图像尺寸和比例仍然是相同的，你是非常安全的。 如果你没有视网膜显示器，从像素比媒体查询开关测试的东西宽度为主。

  • 测试和故障诊断高分辨率内容
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• 如何在没有视网膜MacBook Pro的制定HiDPI（“视网膜”）
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

• WordPress的视网膜图像
  http://wpmu.org/wordpress-retina/

少有关

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

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

• 构建网站Retina显示屏：与像素交友
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• 如何开发视网膜显示一个网站？

• 如何让视网膜准备好了吗？

Answer 5:

为仿效谷歌浏览器的Retina（HiDPI）显示当前方法

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

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

3）在屏幕的顶部的设备下拉框，选择“ 带HiDPI屏幕膝上型 ”

4）现在，您可以查看该网站将如何看待视网膜又名HiDPI屏幕上

Answer 6:

我使用的图像缩放库动态创建的图像。 对于2个版本，我调试过程中添加动态水印 - 这使得它很容易，看看是否被实际显示或不高分辨率图像。 发现它非常有帮助。

这个工程将不同，所以不包括示例代码的方式。

Answer 7:

我不知道这是不是太简单了，我按住Ctrl键，滚动和它触发媒体查询。 我在Bugzilla的检查，它的工作原理。 我不知道，因为它看起来很模糊的SVG缩放，但它是SVG图像。

Answer 8:

如果你有一个苹果（或Mac OSX的虚拟机），可以使用在Xcode的IOS模拟器。 它炸毁窗口两倍大，所以它的过程，不是出现在现实生活中，却会清楚地告诉你，如果你的图像模糊或不。

文章来源: How to test a website for Retina on Windows without an actual Retina display?