browser add-on to test mobile design

Question

Are there any add-ons to test an HTML page to see what it will look like on a mobile device? I'm developing with PhoneGap but Eclipse emulator is too slow to refresh it all the time so I want to have a browser extension that make screen resolution like on mobile.

Calabro

Are you looking to simply emulate the screen size, or do you need to emulate device functionality as well? If screen size is your only concern you can use any Webkit-based browser and resize the viewport as needed. – Unchartered

Answer 1

If you care only about the screen size, Firefox 15 (currently Beta, release coming up in two weeks) has Responsive Design View in the Web Developer menu that allows you to adjust "screen size". For example, you can select 360x640 (nHD resolution) and have a look at your page.

However, mobile browsers do custom adjustments to web pages and these adjustments depend on the browser used. For example, Firefox Mobile does something called Font Inflation. You cannot reproduce it in a desktop browser, you have to actually run Firefox Mobile for that. The problem: mobile browsers will only run on mobiles, even Mozilla stopped supplying Firefox Mobile for the desktop after they switched to the native Android UI.

Edit: Starting with Firefox 33, there is a Firefox OS simulator built into Firefox (thanks to Tomek for pointing me into this direction). To start it, open WebIDE, then click "Select Runtime" and choose "Firefox OS 1.3." This will start the simulator, all you need to do then is clicking the Firefox icon (for me it's a blue one, not the usual orange). There you are, you can test any website in a real mobile browser, right on your desktop.

Suprasegmental

+1 for mentioning Font Inflation in Firefox Mobile. I was not aware of that. – Horsley

There's a very handy, short demo here: youtube.com/watch?v=t07cLJhJkjQ – Adulteration

Answer 2

Firefox OS simulator can do the trick: Just install it. Run it - and run the browser inside. :)

Moriahmoriarty