Cover by Brian Fling

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Creating a Mobile Web App

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.

Defining the Viewport

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: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required