jayphelps / web-retina-emulator

A tiny script for testing what your website looks like on a 2x pixel density (retina) display.

WRE (Web Retina Emulator)

Note: Chrome 32 now supports changing the Device Pixel Ratio via the new Emulation->Screen section. Unlike this script, using that new feature of Chrome will actually let you test everything pixel ratio related, including media queries. So yeah, use that instead of this.

For anyone who has a normal 72/96 dpi display but wants to get a "glance" at how their HTML is rendering for retina displays. It will basically just make your page twice as big, allowing you to quickly see what images are not retina-ready and also point out any CSS properties that may cause blurriness. (like 3d transforms)

Bookmarklet

To use it as a bookmarklet, just prefix the code with "javascript:".

Known Issues

• Fixed positioned elements may shift in WebKit browsers because of issues with position: fixed; and -webkit-transform's. WebKit has been fixed but the patch hasn't made it into any Chrome/Safari release yet.
• Firefox doesn't allow JavaScript that was copy-pasted in the URL to have access to most things so this script can't run. Use a bookmarklet instead.
• Doesn't trigger CSS media queries that use device pixel ratio/min-resolution; so if you use these you'll need to temporarily adjust them. (Pull request anyone?)

web-retina-emulator's Issues

Simplified version that works with new window

This script works well but I need a version that just sets, not toggles, the devicePixelRatio, in a new window. I need to get the context of a newly opened window and apply the script to set the devicePixelRatio. Is that possible?