Viewing mobile theme in Firefox
In Firefox, I recommend the User Agent Switcher addon as it comes pre-installed with the iPhone user-agent and you can switch to it easily. After installing the extension and restarting your Firefox, go to “Tools -> Default User Agent -> iPhone“.
Now, refresh to your site and you should see the mobile theme in action. To add the Android agent to the list, go to “Tools -> Default User Agent -> Edit User Agents“. Click the “New -> New User Agent” button and enter the following: Description: Android User Agent: Mozilla/5.0 (Linux; U; Android 2.2; en-gb; Nexus One Build/FRF50) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 The remaining entries you can keep them at default value. (For iPad, the user agent is Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10)
The next extension you going to use is Firesizer. This extension allows you to resize your browser to a specified screen resolution so you can see how your site renders in different screen size. After the installation, you can find the resize option at the right bottom corner of the browser. Right click on it and select Customize.
You can add new screen size to the list. For your reference: iPhone 4 has a screen resolution of 960 x 640 (H by W, so you should enter 640 x 960) iPhone 3GS and below has a screen resolution of 480 x 320 (H by W, so you should enter 320 x 480) Nexus One (Android) has a screen resolution of 800 x 480 (H by W, so you should enter 480 x 800) Once you have added the screen resolution, you can now view your website in its mobile suit and in the correct screen size, right on your desktop browser. Note: The above addons only work in Firefox 3.6.* and below. They are not compatible with Firefox 4 beta. The above tricks can be repeated on other browsers such as Opera and Safari. Google Chrome does not allow you to change the user agent (you can check out this hack though), so you won’t be able to use the above tricks. How do you test your mobile theme?
