- Tutorials / Mobile Web Development
- Sunday, 21st Jul, 2013
“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.
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.
Open a new tab
Write “about:config” in the address bar and press Enter.
Look for “layout.css.devPixelsPerPx“.
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).
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!