As the mobile device market expands and looks set to increase exponentially, and with the current enthusiasm around responsive design, it is no longer an option for web developers to test just for the desktop. Using Apple’s iOS devices is probably a good start, but obtaining an army of iPhones and iPads of differing specifications just for this purpose is not practical for everyone.

If you have access to a Mac, however, there is a simple, reliable and free way of doing this without leaving OS X. In this post I’ll show you how.

Note: Since this post was first published, there have been some fundamental changes to how the simulator is obtained. This post has been updated to reflect those changes.

The iOS Simulator

Apple’s Developer Suite, which is used to create applications for OS X and iOS, comes with an excellent iOS Simulator, which in turn runs a fully functioning version of Mobile Safari. With it you can test how your pages look and work using the iOS screen dimensions and orientation, rendering, and you can see whether your CSS @media queries are being called. The following instructions show how to get hold of it.

Requirements

You’ll need a Mac running Mac OS X 10.6 (Snow Leopard) or above. A fast and ‘Unlimited’ internet connection is also recommended, since the download is pretty huge.

Obtaining the Simulator (Snow Leopard)

Register As An Apple Developer

To download the iPhone simulator requires you to download the entire development suite. To do this you must first register with Apple as a developer. There are different registration options, with different pricing plans, but if you aren’t planning to develop your own actual apps to upload to the app store, you can choose the free option.

Click on the following link http://developer.apple.com/programs/register/ and click on the blue ‘get started’ button:

Go through the registration process. If you already have an Apple ID, perhaps from using iTunes, then you can skip a few steps.

Download the SDK

Once registered, you will be given access to the main Apple Developer website. Paste the following link into your browser address bar. You may need to log in using the details you have just set up.

https://developer.apple.com/downloads/

You will be presented with a huge list of downloads. Search for ‘Xcode’, then scroll down to entries dated around April 1st, 2011. You should find a link to download Xcode 3.2.6. and iOS SDK 4.3 for Snow Leopard:

Click on the ‘download’ link as indicated. You will then jump to the following section. Click on the ‘XCode and iOS SDK’ link to download the disk image. It’s several Gigabytes so you’ll have a bit of a wait before the next step.

Obtaining the Simulator (Lion+)

As of Lion, you can download the iOS SDK free from the Mac App Store. Once again, it is pretty big so you’ll need to put some time aside.

Install the SDK and Locate The Simulator Application (Snow Leopard)

Once the SDK is installed, you will find the simulator tucked away deep within a series of directories. The path to it is:

HD > Developer > Platforms > iPhone Simulator Platform > Developer > Applications >

Once found, you can either make an alias to it or place it in your Dock for easy access.

Install the SDK and Locate The Simulator Application (Lion+)

As of version 4.3.2 of Xcode, the simulator is actually housed within the Xcode application bundle.

To get to it you must CTRL-click on the application icon, then select ‘show package contents’ from the menu that appears. This allows you to navigate through the internal directories of the application to find the simulator. The required path is:

Contents > Developer > Platforms > iPhoneSimulator.platform > Developer > Applications > iOS Simulator.app

Again, creating an alias in the dock is probably a good idea.

Using The Simulator

Launching the simulator will launch by default as an iPhone. From here you can open Mobile Safari and start browsing the web:

What is really great about this is that you can also connect to a MAMP install and view webpages running on your local host.

If you have any mobile specific CSS media queries these will be called.

Pressing Command and the left and right arrow keys will rotate the orientation of the simulator by 90 degrees so you can see how the page looks both in portrait and landscape mode.

Clicking on the screen with the cursor simulates touch events and dragging with the mouse does what you’d expect. Behaviour is pretty close to the real thing.

By holding Option/Alt you can even simulate a pinch/zoom gesture to preview page zooming.

Visiting the ‘Hardware’ menu gives you further options. Here you can change the simulated device and iOS version. With the device submenu you can choose between the iPhone and the iPad. The latest version gives you the choice between standard and retina versions too, great for checking that your -webkit-min-device-pixel-ratio: 2 media queries are being picked up:

The retina versions don’t really fit too well on lower resolution displays, so thankfully you can change the size of the simulator window using the Window > Scale menu:

Unfortunately, you can’t connect to the app store and start downloading Angry Birds, but then you can’t have everything…

Conclusion

Although Apple states that there are subtle differences between the simulator and the actual hardware (it is a ‘simulator’ after all and not an ‘emulator’) this is the closest you are going to get to the real thing without leaving OS X.

The ability to view draft pages on a local host without needing to upload to a remote server tips it for me, as this is not possible usual an actual handset and is really handy in the early stages of development. Quickly being able to test CSS media queries is another boon.

If anyone knows of similar solutions for other mobile platforms, or a way of doing this in Windows, feel free to leave info in the comments.