如何在没有实际Retina显示的情况下在Windows上testingRetina的网站?

有没有一种方法来模拟在Windows上的视网膜显示器来testing网站HiVidei显示,如视网膜?

我在一台标准的24英寸1920×1080显示器上运行Windows,昨晚我检查了我的网站上的一个朋友全新的15“Retina MacBook Pro和graphics看起来都模糊(远远比一般的15英寸的MacBook),而字体是超级清脆锐利,使得标识由于直接比较而显得更加糟糕。

我已经按照这个教程来使我的网站准备好了:

How to Create Retina Graphics for your Web Designs

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

有没有什么方法可以testing这个实际工作? 显然,我可以问我的朋友使用他的视网膜笔记本电脑,但这不是一个可行的工作stream程。 我希望能够在我自己的环境中至less粗略地testingRetina兼容性的网站。

关于:configuration黑客在Firefox

你实际上可以使用Firefox:

  1. 转到“about:config”
  2. find“layout.css.devPixelsPerPx
  3. 改变它到你想要的比例(1为正常,2为视网膜,等-1似乎是默认。)

截图:

刷新你的页面 – 繁荣,你的媒体查询已经踢了! 帽子火狐浏览器是为web开发真棒! 站起来,不仅网站现在会增加两倍的大小,Firefox的用户界面也将翻倍。 这种加倍或缩放是必要的,因为这是您能够检查标准像素比率屏幕上所有像素的唯一方法。

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

如果您不使用媒体查询和其他更高级的逻辑(例如,您向每个人提供HiDPI图像),则可以将浏览器放大到200%。 Chrome模拟器是一个有用的工具,它可以在媒体查询中使用,但是由于它阻止了缩放,因此无法检查图像质量。

放大Firefox和Edge

目前在Firefox和Edge上,如果放大,会触发基于dppx的媒体查询。 所以这个更简单的方法可能已经足够了,但是请注意,这个function被报告为Firefox的一个“无法修复”的bug ,所以这可能会改变。

在Google Chrome版本“33.0.1720.0 Canary”中,您现在可以使用“Device pixel ratio”,“android font metrics”和“Viewport emulation”等大量参数来模拟iPhone5等设备 。

不需要这个Firefox破解 – 无论如何,很难与之合作。

感谢Google开发团队! !:)

在铬你可以做到这一点:

1)打开Chrome开发者工具,点击小“齿轮”图标。 在这里输入图像说明


2)然后select“在控制台抽屉中显示”仿真“视图。 在这里输入图像说明


3)最后,在Developer Tools中打开“控制台抽屉”,然后selectEmulation 。 设置模拟屏幕并将设备像素比率设置为2.5。

在这里输入图像说明

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

一些变通办法

不太相关

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

1)在网页上点击右键 ”,然后select“ 检查 ”打开Chrome的开发者工具

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

点击切换设备模式图标

3)在屏幕顶部的设备下拉框中,select“ 带HiDPI屏幕的笔记本电脑

选择带HiDPI屏幕的笔记本电脑

4)现在您可以查看网站在Retina(即HiDPI)屏幕上的显示效果

我不知道这是否太简单,我按Ctrl和滚动,它触发媒体查询。 我已经检查了它在bugzilla,它的工作原理。 我不确定svg缩放,因为它看起来模糊,但它是svg图像。

如果你有一个mac(或者mac osx虚拟机),你可以使用ios模拟器和xcode。 它确实炸毁了窗户的两倍,所以它不是现实生活中的现实,而是会清楚地显示你的图像是否模糊。