Faking the browser useragent when testing mobile websites
An easy way to make your browser act like it's a mobile device.
When developing for mobile devices, it would be troublesome having to upload your code to a public server so that you can browse it. Instead, my tip would be to keep the website local but faking your browser's user agent, tricking the browser to act like it is a mobile device. There are several browser add-ons for this, e.g.:
- FireFox: User Agent Switcher by chrispederick
- Chrome: User Agent Switcher by gwilson
- IE: Go get a decent browser, shame on you. Or try: UAPick for IE8 by Bayden Systems (tool does not include user agent strings for mobile devices though, but you can manually add them by editing the Windows Registry. Yeah. I told you to get a decent browser.)
Most of these come with a lot of the most common mobile devices user agent strings pre-defined. More user agent strings are available online (updated June 2010).
Just install the add-on (possibly requiring a restart of the browser), then activate the desired profile. Typically this will be located in your browser menu at: Tools > Defalt User Agent > Apple iPhone (etc).
Assuming you are using the adapted CSS approach (as seen in Mari Jørgensen's blog post "iPhone Optimization Made Easy"), here's the cool thing; when your browser window is maximized, the normal stylesheet will be active. But if you resize the window to a width of about 480px, you will see the modified-for-mobile stylesheet activated instantly.