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

有没有一种方法可以在 Windows 上模拟一个 Retina 显示器来测试一个网站的 HiDPI 显示器，比如 Retina？

我在一个标准的24“1920x1080显示器上运行 Windows。昨天晚上，我在一个朋友的网站上查看了一下全新的15寸 Retina MacBook Pro，图形看起来非常模糊(比普通的15寸 MacBook 要糟糕得多) ，而且字体非常清晰锐利，因为直接比较，使得 logo 看起来更糟糕。

我已经按照这个教程，使我的网站视网膜准备好:

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

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

有什么办法能测试一下这个是否真的有用吗？显然，我可以让我的朋友使用他的视网膜笔记本，但这对我来说不是一个可行的工作流程。我想至少能够粗略测试网站视网膜兼容性它在我自己的环境。

68249 次浏览
小开

As far as I can tell, it's not possible other than buying a retina device.

Some Workarounds

Less Relevant

小开
最佳答案

about:config hack on Firefox

You actually can using Firefox:

  1. Go to "about:config"
  2. Find "layout.css.devPixelsPerPx
  3. Change it to your desired ratio (1 for normal, 2 for retina, etc. -1 seems to be Default.)

Screenshot:


(source: staticflickr.com)

Refresh your page - boom, your media query has now kicked in! Hats off to Firefox for being awesome for web developing! Heads up, not only will the website now be boosted to twice the size, the Firefox UI will also be doubled. This doubling or zooming is necessary, as that's the only way you'll be able to examine all the pixels on a standard pixel ratio screen.

This works fine on Windows 7 with Firefox 21.0, and also on Mac OS X with Firefox 27.0.1.

If you're not using media queries and other more advanced logic (i.e. you're feeding everyone the HiDPI images), you can just zoom in with your browser to 200%. The Chrome emulation is a helpful tool as well as it kicks in media queries, but because it prevents zooming, you can't examine image quality.

Zooming on Firefox & Edge

Currently on Firefox and Edge, if you zoom it triggers dppx-based media queries. So this easier approach may be sufficient, but be aware that the functionality is reported as a "won't fix" bug for Firefox, so this could change.

小开

In Google Chrome version "33.0.1720.0 Canary", you can now emulate devices like iPhone5 and others with a great set of parameters like "Device pixel ratio", "android font metrics" and "Viewport emulation".

There's no need for that Firefox hack anymore - hard to work with, anyway.

Thanks Google dev team! !:)

小开

If you have a mac (or mac osx virtual machine) you can use the ios emulator with xcode. it does blow up the window twice as big, so its not how it appears in real life, but will clearly show you if your images are blurry or not.

小开

In chrome you can do it by:

1) Open up Chrome Developer Tools and click on the little "gear" icon. enter image description here

2) Then choose "Show 'Emulation' view in console drawer." enter image description here

3) Finally, open up the "console drawer" in Developer Tools, and choose Emulation. Set Emulate screen and set the Device Pixel Ratio to 2.5.

enter image description here

小开

I do not know if this is too simple, I press ctrl and scroll and it triggers the media query. I have checked it in bugzilla and it works. I am not sure about the svg scaling as it appears blurry,but it is the svg image.

小开

Current Method for Emulating a Retina (HiDPI) Display with Google Chrome

1) "Right Click" on the web page then select "Inspect" to Open Chrome's Developer Tools

2) Click the "Toggle Device Mode" Icon

Click the Toggle Device Mode Icon

3) On the Device Dropdown box at the top of the screen, select "Laptop with HiDPI Screen"

Select Laptop with HiDPI Screen

4) You can now view how the website will look on a Retina aka HiDPI screen

小开

I use an image resizing library to dynamically create images. For the 2x version I add a dynamic watermark during debugging - this makes it very easy to see if the high-res image is actually being shown or not. Have found it very helpful.

The way this works will vary so not including sample code.

小开

Google Chrome Version 80

  1. Open the Developer Tools ctrl-shift j
  2. Toggle the device toolbar by clicking on the tablet/phone icon at the top left(it will turn blue if you click it)

enter image description here

  1. Now the viewport should have a toolbar above it. Click the options icon(3 dots) at the top right and select the Add device pixel ratio option.

enter image description here

  1. You should now see the option on the toolbar. From here you can switch to 1x, 2x, or 3x.

enter image description here

  1. When you are testing make sure that you hit the refresh button each time you change the pixel ratio. If you set the ratio to 2x and then set it back to lower then you won't see any changes because the browser will not fetch 1x assets if it has already fetch 2x or higher.

提交答案