How to Activate User Agent Switcher in Safari

By Janine Warner, David LaFontaine, and Lee Andron from iPhone and iPad Web Design For Dummies

When you’re testing a website intended for the iPhone and iPad on a desktop computer, if the device detection script on a server recognizes that you’re using a browser on a computer, it doesn’t show you the phone version.

That’s where user agent switching enters the picture. Safari includes special features that make it possible to change the user agent. To activate the User Agent Switcher, in Safari, follow these steps:

Enlarge

Click on the Gear shift icon, shown in the top right corner of the Safari web browser, to open the General Menu.

Choose Preferences.

These are also shown in the figure from the last step.

Enlarge

Click to select the check box labeled Show Develop Menu in Menu Bar.

The cursor is pointing to it in this figure. The Develop menu option is added to the top menu bar.

If you don’t see the menu at the top of the Safari web browser, be sure to select the Show Menu Bar option from the general menu. When this option is selected, the name changes to Hide Menu Bar and the menu is visible at the top of the browser.

Enlarge

Click the Develop menu option and select User Agent→<user agent>.

This opens a list of profiles.

Enlarge

Open any web page to see how it displays with the selected profile.

In the figure the iPhone profile is selected and the Facebook web page displays in a narrow column aligned to the left — the version of the page that’s optimized for the iPhone. You see how to resize the browser window in combination with the user agent to create a general idea of how the page will display on an iPhone.