Oct

19

Fullscreen iPhone WebApps

2 years ago, mid-October | 1 Comment

Web applications on the iPhone have always been second class citizens without access to the really interesting features. To add insult to injury web applications lost a large chunk of screen real estate to the top and bottom Safari toolbars.

Well, now they don’t need to. For users with firmware 2.1, if you add the following lines to the <head> section of your web application page then, when someone adds your web application to their home screen and then uses it all they will see is the standard bar showing carrier name, signal and battery level. As ever the pictures should make it much clearer. Notice that there is no address bar or lower toolbar at all, even when scrolling.

<meta name="viewport" content="width=device-width; 
 initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
 
<meta name="apple-mobile-web-app-capable" content="yes" />
 
<meta names="apple-mobile-web-app-status-bar-style" 
 content="black-translucent" />

One thing I should point out is that, if you already have a link to a particular web application on your home screen, you will need to delete it and recreate it after the above lines have been added.

Web app opened from Home ScreenWeb app scrolling down - no address barWeb app scrolling up




[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon] [Twitter]

Tagged with: •
October 19, 2008 16:44


Comments

Name (required)

Email (required)

Website

Speak your mind