How to Test a Website for Retina on Windows Without an Actual Retina Display

How to test a website for Retina on Windows without an actual Retina display?

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:


_{(source: staticflickr.com)}

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.

Test desktop app with Retina images without Retina display

Apple provides a set of tools to do so.
You will find it all there: https://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html#//apple_ref/doc/uid/TP40012302-CH6-SW1

How to simulate a retina display (HiDPI mode) in Mac OS X 10.8 Mountain Lion on a non-retina display?

1. Search for, download, and install Apple's free Additional Tools for Xcode 8 (for previous Xcode releases search for Graphics Tools for Xcode according to your version).
   
   Note: free Apple Developer account required.
2. Launch Quartz Debug application.
3. Go to menu: Window ---> UI Resolution.
4. Check Enable HiDPI display modes.
5. Quit Quartz Debug.
6. Open System Preferences.
7. Select Displays icon.
8. If using multiple display, select the configuration window on the display you wish to simulate HiDPI mode on.
9. Under Resolution:, select Scaled radio button.
10. Find a desired resolution postfixed with (HiDPI) and select it.
11. Your display is now running in HiDPI mode, simulating a retina display.

Source: High Resolution Guidelines for OS X

Processing: saveFrame() and retina display

Text is clean with this sketch, do you run it in java mode ?

// size(960, 540); //

size(960, 540, "processing.core.PGraphicsRetina2D");
hint(ENABLE_RETINA_PIXELS);

textSize(32);
text("word", 10, 30); 
fill(0, 102, 153);
text("word", 10, 60);
fill(0, 102, 153, 51);
text("word", 10, 90); 

If you like a clean retina screenshot, you need to double your sketch size with size(1920,1080).
If you need this picture for a website you can use this html <img src="retina" width="960" height="540">

Retina Images not being loaded on sencha touch

OK, so I used a small part of the retina.js file and created a new class, it uses the isRetina function to tell weather the devicePixelRatio is higher than 1.

Ext.define('MyApp.Retina', {
  singleton: true,
  isRetina : function(){
    var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
                      (min--moz-device-pixel-ratio: 1.5),\
                      (-o-min-device-pixel-ratio: 3/2),\
                      (min-resolution: 1.5dppx)";

    if (window.devicePixelRatio > 1)
      return true;

    if (window.matchMedia && window.matchMedia(mediaQuery).matches)
      return true;

    return false;
  },
  getSrc: function(url){
    return this.isRetina()? [url.slice(0, -4), '@2x', url.slice(-4)].join(''): url;
  }
});

Now throughout my sencha app I create images with MyApp.Retina.('http://example.com/foo.jpg') as src value, when the device is retina the function returns http://example.com/foo@2x.jpg

---

Related Topics