There a way to simulate a Retina display to test a website for HiDPI displays such as Retina. We can using Firefox.
- Go to
about:config - Find
layout.css.devPixelsPerPx - Change it to your desired ratio (1 for normal, 2 for retina, etc. -1 seems to be Default.)
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. It also kicks in media queries. 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 and 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.
This tutorial to make my website Retina ready How to Create Retina Graphics for your Web Designs.