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.
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:
CSS can be added to customize the appearance later.