Oct

19

Fullscreen iPhone WebApps

9 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



»crosslinked«

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

Tagged with:
October 19, 2008 16:44


Comments

Name (required)

Email (required)

Website

Speak your mind

Current Electricity Use (15min)


iPhone/Webkit RSS Reader

Links


Tags

1-Wire android api Apple arduino currentcost DDAR development DVD FIC freerunner G1 google Google Phone gphone gprs GPS hardware image image builds inspiration iphone jailbreak kiosk linux Mac monitoring Music neo 1973 Nokia openmoko opensource OSX Pachube personal qtopia rhubarb rikki Rio slimp3 slimserver software tracking Trolltech u-boot


Twitpic


Graphy Stuff






Nasty Spam Monkeys