Building iPhone Apps with HTML, CSS, and JavaScript

Chapter 2. Basic iPhone Styling

Ultimately, we are going to build a native iPhone app using HTML, CSS, and JavaScript. The first step on this journey is to get comfortable styling HTML to look like an iPhone app. In this chapter, I’ll show you how to apply CSS styles to a bunch of existing HTML pages so that they are easily navigable on an iPhone. So, in addition to moving closer to building a native app, you’ll be learning a practical (and valuable) skill that you can use immediately.

Don’t Have a Website?

If you’ve been testing all your web pages locally on your personal computer, you won’t be able to view them on your iPhone without setting up a server. You have a few choices:

• Host your web pages on a web server (your Internet Service Provider likely offers a complimentary web hosting service) and connect to that server from your iPhone.

• Host your web pages on a web server running on your computer, and connect to that web server from your iPhone. This only works when your iPhone and your computer are on the same WiFi network.

• If you don’t have an iPhone, you can simulate one using Safari. In Safari’s advanced preferences, enable the Develop menu, then select Develop→User Agent and choose the version of Mobile Safari you want to simulate.

This chapter is set up so that you can try the examples as you read through it. So no matter which option you choose for viewing the web pages, try reloading them in a browser (preferably the iPhone browser) each time you add something new, and save ...