Home » Tutorials » Mobile Web Development » Testing & Troubleshooting Retina Display Content Without Actual Device

Testing & Troubleshooting Retina Display Content Without Actual Device

Testing & Troubleshooting Retina Display Content Without Actual Device

  • Stumble it!
  • Share

Retina Responsive Web Design

Retina Display” a term first introduced by Apple that used to describes it’s iPhone 4 which has double density pixels ( or we known it as high resolution) screen. There are getting a lot of Apple devices have come with Retina Display. Therefore, when creating responsive website you may also need to accommodate high quality of images into them for best display and best experiences.

Testing & Troubleshooting Retina Content

Before you releasing your Retina website, you’ll want to make sure that your Retina content works as expected. Although, you can test it using actual devices such as iPhone 4, The New iPad or MacBookPro Retina, you can emulate a high resolution display on a standard resolution display, for instance – PC with Firefox 21 installed.

I found this is extremely useful especially for those who don’t owned any Retina devices.

Launch Firefox:

Step 1

Open a new tab

Step 2

Write “about:config” in the address bar and press Enter.

Step 3

Look for “layout.css.devPixelsPerPx“.

Step 4

Change the value of the “layout.css.devPixelsPerPx” to Retina Display ratio. (reference: -1 is default setting, 1 is normal ratio and 2 is Retina).

Step 5

Open a new tab and load your website. You should be able to see how your website looks exactly on Retina Devices.

Did you found this helpful? Do you have other tools or solution to test Retina content without Retina device? Share it in the comment below!


  • Replacing jQuery Animation With CSS Hardware Accelerated
  • Launch Native iOS Google Maps Via Your Web App
  • Speed Up Page Loads Time Using Prefetch / Prerender

Android, iOS Development Tutorials