Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

browser add-on to test mobile design

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.

like image 282
gorgi93 Avatar asked Aug 13 '12 14:08

gorgi93


2 Answers

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.

like image 139
Wladimir Palant Avatar answered Sep 22 '22 09:09

Wladimir Palant


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

like image 22
Tomek Avatar answered Sep 22 '22 09:09

Tomek