WebApp up iPad home screen bookmarks

While discussing mobile web frustrations with Rob, we hit on an idea to reclaim a few pixels for sites that we visit regularly enough to have added them to our device’s home screen.

Having been working a lot with HTML 5 for mobile app development recently (which Rocks, with a capital ‘R’) I suggested that we recycle Rob’s home screen icon injecting bookmarklet to add Apple’s web app meta tag to the document’s head, so that a site could be forced to run ‘full screen’ when added to your device’s home screen… Simple but effective!

Here’s the code, for anyone interested:


javascript: var s = document.createElement('meta');s.setAttribute('name', 'apple-mobile-web-app-capable');s.setAttribute('content', 'yes');document.getElementsByTagName('head')[0].appendChild(s);void(s);var z = document.createElement('meta');z.setAttribute('viewport', 'apple-mobile-web-app-capable');z.setAttribute('content', 'width=device-width');document.getElementsByTagName('head')[0].appendChild(z);void(z);

So, just save the above as a bookmark in Mobile Safari (or just bookmark this) and ‘go to it’ before adding a site to your home screen… and, hey presto, your newly book marked site will run full screen when you go to it!

April 8, 2010 | Filed Under Development, HTML 5, iPhone OS

Comments

You can leave a comment, or trackback from your own site.

One Response to “WebApp up iPad home screen bookmarks”

  1. Pixelbox » “Save as iPhone web app” bookmarklet on April 8th, 2010 5:57 pm

    […] was chatting to Tom today about the all things iPad/iPhone etc and he mentioned an article on the Gardian where they […]

Leave a Reply