Search code examples
javascriptretina

How can I test retina image substition without retina display?

What I have:

I'm using retina.js to substitute larger sized image variants for retina displays.

What I need:

I need to test that the script is working. My output should read as:

[email protected]

...instead of...

someimage.png

My problem:

I can't find a means of emulating a retina display that will allow me to check the source code.

What I've tried:

  1. Similar questions suggest that I modify Firefox's config however my default value for layout.css.devPixelsPerPx is set to -1 (not 1). Changing to -2 or 2 does not produce the necessary result.
  2. Opera's Device Emulator does not offer me a means of reading the source code.
  3. Chrome has a device mode that allows me to change the device pixel density. The default is 2. Changing the value to 1 or 3 does not produce any noticeable effect.
Solution

  • Perhaps you could write a test variable in to the URL, and alert the image source, and use a retina device or that opera emulator.

    Something like yoursite.com/app?alertImage=test

    (assuming you're using jquery):

    if (location.search.indexOf('alertImage') >= 0) {
    alert($('.imageClass').attr('src'));
}