Question

I like to use Firefox 'Responsive Design View' to emulate multiple mobile devices on my desktop. But I'm in doubt about one thing.

As far as I understand iPhone with Retina use 2 physical pixels per one CSS pixel. And Firefox 'Responsive Design View' do not. That mean that if I want to emulate iPhone 4 screen with resolution 960x640 I actually should use FF RDV preset 480x320 (and add preset 568x320 for iPhone 5). Right?

Was it helpful?

Solution

You're right that you should use the 480x320 viewport size, as all sizing measurements are based on logical pixels not the screen's physical pixels.

If you want to thoroughly test the site for retina content, and you don't have a retina screen, change the value of layout.css.devPixelsPerPx in the about:config page to 2. -1 is default. Note the UI will all look huge, but this will properly kick in pixels per px media queries, etc.

I just tried the devPixelsPerPx tweak along with RDV, and it works well - RDV looks like a great tool!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top