Adding another User Agent to the Safari User Agent switcher menu

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:


<dict>
<key>separator</key>
<true/>
</dict>
<dict>
<key>name</key>
<string>Android</string>
<key>version</key>
<string>2.1</string>
<key>platform</key>
<string>Mac</string>
<key>user-agent</key>
<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>
</dict>

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:

iPhone:

Android:

About these ads
This entry was posted in mobile, safari, uportal. Bookmark the permalink.

5 Responses to Adding another User Agent to the Safari User Agent switcher menu

  1. Matt says:

    I like to use the Android SDK’s Andrioid Enulator to test most mobile content from my desktop. http://developer.android.com/guide/developing/tools/emulator.html

  2. Pingback: Five Tips to Make Your Facebook Timeline Amazing - Fix-Singh :: Fix-Singh

  3. Pingback: Five Tips to Make Your Facebook Timeline Amazing | Got2.Me

  4. Pingback: Five Tips to Make Your Facebook Timeline Amazing | Porzellan

  5. Pingback: Cinco consejos para hacer que su Timeline de Facebook se vea increíble | Computerworld Venezuela

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s