How to test a webpage meant for Retina display?

Question

I have coded a webpage meant for retina display. I currently do not have a retina display monitor.

Is there any simulator application or tool to test web pages for retina display?

Or, are there monitors(not Apple's MacBook or iPad) which are similar to Apple's retina display?

Thanks in advance.

Answer 1

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.)

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!

This was done on Windows 7 with Firefox 21.0.

The advantage of this solution is that it will trigger media queries and other advanced logic. If you're not doing that, and you're just feeding everyone the HiDPI images, you can just zoom in with Chrome etc (or write CSS to zoom for you, if that floats your boat).

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.

Answer 2

You can check with the Chrome Browser to test retina display working or not, use this guide

1. Open Chrome Browser and right click then click inspect element
2. In the bottom bar you will find some tabs that console, search, emulation and rendering
3. Click the tabs emulation, then pull up the bar tab as shown below
4. Adjust according to the menu on the left, adjust the device, screen etc.

Please check this article for detail guide : http://www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html