Using iOS Simulator

Getting started


There are many uses of iOS Simulator that frontend developers can make use of.

All you need is the iOS Simulator provide for free from Apple. It is apart of the Xcode package. Download Xcode on the Mac App Store.

Launching iOS Simulator.

  1. Launch Xcode
  2. In the menu bar: Xcode —> Developer Tools —> iOS Simulator.
  3. I would make a shortcut on your dock for quick access.

Just a FYI, when you update Xcode for some reason your shortcut on your dock will disappear so you must re-dock it.

Choosing a device


  1. Open iOS Simulator
  2. In the menu bar: Hardware —> Device —> (Choose the device you want)
    • iPad
    • iPad Retina
    • iPad Retina (64-bit) - requires Xcode 5.0.1
    • iPhone - no longer in Xcode 5
    • iPhone Retina (3.5-inch)
    • iPhone Retina (4-inch)
    • iPhone Retina (4-inch 64-bit) - requires Xcode 5

Something to keep in mind is that the retina version will display all the pixel, making it appear twice as big on your screen unless of course you have a retina screen.

Choosing iOS Version for iOS Simulator


Make sure you know what version of Xcode you have installed. To find out what version you have:

  1. Lanch Xoode
  2. In the menu bar: Xcode —> About Xcode

Xcode 4

  1. Open iOS Simulator
  2. In the menu bar: Hardware —> Version —> (Choose iOS version you want)
  3. You probably will only have one or two choices but more can be downloaded.
  4. Remember you can only view a version of iOS on a device that it has been available on.

Xcode 5

  1. Open iOS Simulator
  2. In the menu bar: Hardware —> Device —> (Choose the device you want) —> Choose the iOS version you want.
  3. You probably will only have one or two choices but more can be downloaded.
  4. Remember you can only view a version of iOS on a device that it has been available on.

Install more versions of iOS

  1. Open Xcode
  2. In the menu bar: Xcode —> Preferences.
  3. After the preference box opens click on the “Downloads” icon.
  4. Click on “Components” option.
  5. Now if you can download any of the other available versions you want.
  6. In Xcode 5.0.0 on Mac OS X 10.8 you have the choices of:
    • 5.0
    • 5.1
    • 6.0
    • 6.1
    • 7.0
  7. In Xcode 5.0.1 on Mac OS X 10.9 you have the choices of:
    • 6.0
    • 6.1
    • 7.0

The ability to change the iOS version is defiantly much more important for an iOS app developers but still important for web too. Even through Apple has a instanely high conversion rate for their current iOS version it is still important to check back one version to make sure all is good and nothing is broken.

Testing in iOS


You can use iOS Simulator to test your websites and web apps on an iPhone and iPad. In my experience when using this what is rendered is very close to the real thing if not exactly the same. This way if you do not have access to one of these devices you can still test on them (as long as you have a Mac). Now there is no reason not be testing on the iPhone and iPad and have a fairly good idea how it will be rendered on each.

You can even use the Safari web inspector with it. I have a post that goes into more detail if you are interested “Web Inspector with iOS Simulator.”

Testing locally


Have a site your working on but it is not live yet and need to test in iOS? No Problem.

Super easy way, just drag and drop your html file anywhere over the iOS Simulator. It will open up is Safari automatically. Unless you like to torture yourself you can type the address in manually to the address bar. Both will work.

But I am using a MAMP. No problem. Just type in the address bar in Mobile Safari as you would any other browser and your done.

Do not forget you can view live sites too.

This is important when judging font sizes and other things that need to be easily read or seen. You may still want a real iPhone/iPad to test this out on but you can get it very close using the simulator. The iOS Simulator is great for working on your css for layout on iPhone and iPad without the need to have one with you at all times while you are making websites.

Creating Screen shots


Another great thing with iOS Simulator is the ability to save screen shots. Even better is the fact that if you use the retina device it is actually will show the double pixels of retina display. Meaning if you save a screen shot while using the retina device the iPhone screen shot will be 640px × 1136px and iPad screen shot will be 1536px × 2048px.

  • In the menu bar: File —> Save Screen Shot
  • The screen shot will be saved to your desktop.

These screen shot are great for creating mockups for a portfolio or for a client when used along with images of the devices. There are some great images of many Apple products on Pixeden that I like. My favorite ones to use are the iPhone 5, iPad and iMac. Which when used with the iOS Simular screenshots look very nice. One thing I like about Pixeden is the psd are created with many layers. For instance if you do not like the screen glare you could turn that layer off or to hide the background turn that layer off.

Important Shortcuts

  • Go to Home Screen: shift + command + h
  • Rotate (Device) Left: command + left arrow
  • Rotate (Device) Right: command + right arrow
  • Save Screenshot: command + s

Leave Your Feedback

Name is required.
Email is required.
URL is required.
Message is required.