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

Answer 1

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

Answer 2

Just go in responsive mode in Firefox or Chrome, and edit resolutions to choose : Laptops with HiDPI screen. It will do the job ! ;)

Answer 3

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:

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 4

You can add this css. Everything will look 2 times the size but it makes it easy to spot if there is any issues. The Javascript Web Retina Emulator didn't work for me (blurry in Safari)

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

The zoom: 200% applies to webkit, -moz for firefox so Safari/Chrome/Firefox this will work, not sure about IE.

If you apply -webkit-transform: scale(2) things will look blurry so you need to use the zoom: 200%;

Answer 5

There is a JavaScript Web Retina Emulator on GitHub.

You can also use Opera Mobile Emulator to test for custom resolutions. There's an explanation of how to do it here.

If you have an older Apple computer (without a retina display) you can simulate retina displays with Quartz Debug, a tool inside XCode. Also in XCode you can test for iOS devices with retina displays using the iOS Simulator.

Answer 6

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

That code alone won't do the trick. If you're using media queries, you should switch the pixel ratio to 1, instead of 1.5 or 2, to do the trick. Otherwise it won't switch images to the higher resolution counterparts.