Retina display emulation with Firefox

Retina and Normal display comparison

My boss was asking me for a way to ‘emulate a retina display’ a couple of days ago, and despite the fact I understood how images are handled in our organisation such that displaying the page at 200% would likely be a quick and easy way to preview it, I doubted he would accept the simplicity of this answer. Thus I set out to find something more concrete.

One way to emulate a retina display is through settings on Firefox, specifically about:config, which should be typed in the address bar of the Firefox browser. Firefox will greet you with a warning, but we’re not changing anything irreversible, so onward march.

about:config Firefox

Click on ‘I’ll be careful, I promise!’ (really mean it!) and search for “layout.css.devPixelsPerPx” with the search bar at the top of the page. If you double-click this, you can change it to the ratio of your choice.

I find that the default ratio for Firefox seems to be -1 over two different computers running two different operating systems, but 1 is supposed to be the value for ‘normal’ with 2 for retina.

When the page is refreshed, this media query starts working. Apparently, according to andrewb, this has the advantage of triggering media queries and other advanced logic, which simply viewing the screen at 200% does not do. Sites like Apple’s uses media queries to switch out images to ‘higher resolution counterparts’, whereas sites like this blog simply uses images at twice the size, scaled down. I’ve tried my best to compress these so it won’t eat at people’s internet quotas.

While an interesting concept I think would be much too difficult to maintain long-term as this blog is constantly changing, and more images are being added to it every day. Though I certainly wouldn’t discount it for the future, when more devices than ever will turn retina and give us more reason to change the way we work.

Certainly, I can see this is a topic we will be revisiting again in the future.

Topmost image from Sebastian Anthony, on ExtremeTech.