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
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.
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
about:config hack on Firefox
You actually can using Firefox:
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.