Prior to the iPhone, if a site was built for mobile browsers, it was simply referred to as a mobile website, or as web content designed to be viewed within a web browser. Few mobile browsers support the complex interactions that are often associated with web applications, or application-like experiences using web technologies. The iPhone wasn’t the first mobile browser to enable the creation of mobile web applications, but it certainly has had the greatest impact.
Mobile web applications designed specifically for the iPhone (and for WebKit by proxy) have since exploded into their own category of mobile experience. But the reality is that creating a mobile web app isn’t really that much different than creating a normal mobile website.
The following are techniques to create a more application-like experience specifically on the iPhone.
The viewport is the area within a browser where content can be seen by the user. On the desktop, the user can resize the browser window and therefore the viewport. In mobile devices, the browser area cannot be resized; therefore, most Class A browsers—including WebKit and Mobile Safari—create a virtual viewport area, adjusting the content to fit within the screen. By default, Mobile Safari assumes a viewport of 980 pixels, the recommended size for desktop sites.
You can change the viewport to the width of the device—on the iPhone, 320 pixels—by adding the following line of code within the head of your document: ...