Blog Du Jour

Using the iOS Simulator

Why Bother with the iOS Simulator

If you already have an HTML/PHP project then you know how to render pages in a browser, and how to change the browser window size to see whether your CSS coding works as well as you intended.

The Apple iOS Simulator gives help beyond what a browser will do for you. You can run your pages in various versions of Apple devices: iPhone/iPad/Watch. You can see whether your project looks and works the way you intended in the actual "hardware". At the time this was written you can render pages in iPhone 5 - iPhone X (all sizes), and in iPad Air - iPad Pro (all sizes).

Xcode & iOS Simulator Requirements

To begin using the iOS Simulator you will need Xcode which is a MacOS app. It is available free from various sites without having Apple Developer status, or directly from Apple otherwise. I am using Xcode version 8.3 in the Fall of 2017 and running version 10.0 of the Simulator to create these examples on an Apple iMac. If you are running Windows and have VMWare or VirtualBox then run under virtualization, but the author has not tested Windows with Xcode.

Xcode Menus

1. Open Xcode and then select from the Xcode pull-down: Open Developer Tool, Simulator. If you don't know how to open Xcode on a Mac use File and find Xcode in the Applications folder. Double click it.

Fig 1. Open Xcode and activate the Simulator

Simulator Menus

2. These menus should now be shown in the upper left menu bar next to the open apple. See Figure 2 below. Next, click Hardware, Device, iOS #, iPhone/iPad model. The Simulator will open without showing a webpage.

Fig 2. Choosing the hardware to simulate

Show Online Websites

3. Show a website by clicking on the Safari icon at the bottom of the Simulator screen to begin. What? You probably want to see how your own page looks! That will be covered after you have practiced with the basics.

Step A. Click in the address bar and enter an online URL where the page is available. For example: http://www.amazon.com. The following steps apply only to web pages that exist online, but please read these instructions to get familiar with the basics before simulating an offline page on your computer.

Fig 3. Enter the online URL into the Simulator address bar

Fig 4. Browse your first page in the Simulator

TIP: use your mouse as if it were a finger: press the mouse and drag to move around the screen.

Step B. After your page is rendered by the Simulator SAVE IT TO YOUR HOME SCREEN! Click the boxed-arrow icon in the footer menu and then Click "Add to Home Screen".

WARNING: the new icon on your home screen you created with these two steps will be deleted when you change device types so you would need to repeat Steps A and B again.

Fig 5. Footer below a rendered page

Change Device, Orientation & Window Scale

4. After you have browsed a page next explore the Simulator menus, particularly Hardware: Device and Rotate. Rotating helps you to check your CSS landscape settings.

Fig 6. Rotate the Simulator to test CSS styles

If the size of the Simulator seems too big, as mine does, scale it to 50% of the default size using the menu: Window, Scale.

Fig 7. Change device size

Show Offline Pages in the Simulator

This section depends on you having practiced the steps 1 - 4 above.

Here you will learn how to tell the Simulator where to find a page on your computer. If you are a careful developer you will want to simulate pages in development before people see them on their phones, which nowadays is one of the first devices we all use to preview new links.

To begin open Finder and see Devices, Macintosh HD in the left-side panel, then click on Macintosh HD. If you see Devices but not Macintosh HD click Show beside Devices.

Fig 8. Finder opening Users in Macintosh HD

Click Users in Finder and locate your user name (it may have a house/home icon as mine does). Click on it and keep clicking and taking notes on the folders until you find the page you want to simulate.

Your objective is to form a local URL. It must begin with "file:///Users/" then your user name (from Finder) then "/", then folder name, then "/", then folder name (as many as you need) followed by /index.html (or your page name).

Where can I learn my local URL? Use Finder to locate your HTML source file. Double-Click on the filename. Because the filename has an extension of .HTML Finder will render it on your display. Finally, look at the address bar where you will see the local URL. Copy it. Here is an example of a local URL:
file:///Users/Hugh/Sites/BLOG/simulator/index.html

Use the local file designation exactly as you did in Figure 3 shown in Page 1 of 2.

TIP: I always copy the local file designation into the source code for reference later.

ADVANCED: If you are simulating a PHP page the script will have to be interpreted before it is rendered by the Simulator. In this case I enter something like this in the URL field. Note: because the PHP interpretator (localhost) already knows to look for my scripts in /Users/Hugh/Sites/ I can forgo entering those folders. http://localhost/BLOG/simulator/index.php

A work-around is just to render the PHP page as you usually do and then copy the source code as HTML (which is directly usable by the Simulator) and open this HTML as described above.

Wrap-up

After you become facil with the iOS Simulator to perfect your pages styles, you must test on an actual hardware device. The Simulator omits the GPS, omits iPhone/iPad/Watch hardware, omits now-common gestures, omits the phone, and omits truly accurate rendering. I have been bitten by both the hardware and software differences.

TIP: The Simulator is a necessity but it is not sufficient.