How to test a website for Retina on Windows withou

问题:

Is there a way to simulate a Retina display on Windows to test a website for HiDPI displays such as Retina?

I run Windows on a standard 24" 1920x1080 monitor. Last night I checked out my website on a friends brand new 15" Retina MacBook Pro and the graphics looked all blurry (far worse than on a regular 15 inch MacBook), while the font was super crisp and sharp, making the logo appear even worse because of the direct comparison.

I have followed this tutorial to make my website Retina ready:

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

I used the retina.js approach since I don't have any background images.

Is there any way for me to test if this actually works? Obviously I could ask my friend to use his Retina Notebook but that is not a feasible workflow for me. I want to be able to at least roughly test websites for Retina compatibility it in my own environment.

回答1:

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:

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.

回答2:

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! !:)

回答3:

In chrome you can do it by:

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

---

2) Then choose "Show 'Emulation' view in console drawer."

---

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.

回答4:

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

Some Workarounds

• Suggested here:

  • If you doubled up the image sizes and proportions are still the same, you’re pretty much safe. If you don’t have a retina display to test with, switch from the pixel-ratio media query to something width-based.

  • Testing and Troubleshooting High-Resolution Content
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• How to Develop for HiDPI (“Retina”) without a Retina MacBook Pro
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

• WordPress Retina Images
  http://wpmu.org/wordpress-retina/

Less Relevant

• How to Create a Responsive, Retina-ready Website

• How to Design for Apple’s Retina Displays
  http://www.studiopress.com/design/retina-display-design.htm

• Building Websites for Retina Displays: Making Friends with Pixels
  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?

回答5:

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

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

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

回答6:

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.

回答7:

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.

回答8:

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.