I’ve been doing a bit of testing and development on the mobile themes that uPortal 3 ships with. The portal detects your User Agent and if you are on an iPhone/iPod you get the iPhone skin, if you are on an Android device you get the Android skin, and all others get the normal desktop skin.
Safari already has a User Agent switcher in the ‘Develop’ menu (this is enabled in Preferences > Advanced if you don’t have it enabled already). It allows you to masquerade as various versions of Safari, iOS devices, IE, Firefox and Opera. The iOS devices work a treat with the uPortal mobile detection, so that is covered.
But what about Android? Luckily, the list that Safari uses is provided by a simple plist file (which is just XML), so we can add our own User Agents to the list.
First, close Safari.
Next, we want to copy this file to our Desktop, make the changes and copy it back into Safari:
cp /Applications/Safari.app/Contents/Resources/UserAgents.plist ~/Desktop/
Open the file you just copied (now on your Desktop), and you’ll see all of the User Agent definitions. At the bottom we will add a separator, and a new definition:
<string>Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17</string>
Make sure you put this block before the ending </array></plist> tags.
Save and close. Now we want to copy the modified file back into Safari:
sudo cp ~/Desktop/UserAgents.plist /Applications/Safari.app/Contents/Resources/UserAgents.plist
Start Safari and you’ll see the new User Agent in the menu.
We can now switch to that new User Agent and masquerade as an Android device. Here’s some screenshots of the two mobile themes: