Going mobile

Smartphones are the future

Since the iPhone seems to be the device of choice now (at least among my friends) I thought I would see if I could design a web page specifically for the iPhone, i.e. so it would look like an "app."

Actually my original goal was much bigger: to serve iPhone optimized pages from a couple Drupal sites that I have built by automatically detecting the iPhone. That still is the goal, but it's going to have to be broken down into smaller pieces.

I'm going to start out by building an HTML page and styling it with CSS. The page will basically be some kind of eReader. I'm starting with one book. The page will have the title of the book and a list of chapters. Each chapter name will be clickable and load the chapter text. I'm not sure yet whether this will use regular links or some jQuery ajax action. (One good thing about the iPhone - and Android - is that it's almost certain that javascript will be on. It may seem that loading jQuery might be too much (about 70k), but if it's loaded from Google its also a good bet that it's been cached.) We'll see.

Tell the smartphone how wide the page is

The first key piece of information is that the iPhone assumes that any web page is 960px wide. To change this is simple. Just add the following to the head of the HTML document near the other meta tags:


<meta name="viewport" content="user-scalable=no, width=device-width" />

With this, plain HTML will display nicely. Shown below is an iPhone-sized (320 x 480 px) Safari window.

One way to make Safari emulate the iPhone is to type this in the address bar:

javascript:window.scrollTo(0,0);resizeTo(320,480);

CSS can be added to customize the appearance later.