21

So I've only seen one website do this and I'm very curious to know how they do it. I'm using an iPhone 4 with iOS5 by the way.

Go to http://m.funnyordie.com/ (Will Ferrell's sketch comedy site) on mobile Safari, add it to the homescreen, and then click on the homescreen icon that was just added.

The mobile site shows up without any of the Safari buttons or address bar. It even shows up in the open app tray as an open stand-alone app (double-tab the home button to see what I mean when Funny or Die isn't in the foreground).

You can navigate the videos on the page and even search, but when you click one of the other tabs (Most Viewed, FoD Exclusives) it takes you to the Safari app for a new tab.

I've never seen anyone else do this and I'm very curious to know how they do this. Anyone know?

Miles
  • 1,615
  • 4
  • 17
  • 42

2 Answers2

33

It's called a Web Clip and if you specify some meta data in your html you can have it appear on the home screen with an icon

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

To add an icon:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

To have a startup image:

<link rel="apple-touch-startup-image" href="/startup.png">

To hide the navigation bar:

<meta name="apple-mobile-web-app-capable" content="yes" />

To change the status bar appearnace:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

(Note: on iOS 15, the method above won't work according to: https://developer.apple.com/forums/thread/683403) To change the status bar appearnace on iOS 15:

<meta name="theme-color" content="#ecd96f">
k1an
  • 39
  • 1
  • 7
DHamrick
  • 8,338
  • 9
  • 45
  • 62
  • Thanks! I'm assuming that automatically gives it an app icon for the open app tray, even though I didn't see that explicity said in the docs. – Miles Nov 19 '11 at 18:40
  • Yes, the `apple-touch-icon` is what gives it the app icon in the open app tray – DHamrick Nov 19 '11 at 18:41
  • Well the combination of the icon and the web-capable line is what does it right? Because I've set an icon for pages before and that alone doesn't make it show up as an app in the open app tray. – Miles Nov 19 '11 at 20:48
  • Thanks man, I had a backbone app and an angular app that I SWORE had the same meta data, but were performing differently. This totally answered my question and helped me identify what I was overlooking +1. – Scott Sword Feb 19 '13 at 04:01
  • 1
    It's not working in iOS 13, we can only hide the toolbars by clicking the aA on the left hand side of the address bar. – Kenneth Li Jun 12 '20 at 06:23
-3

Also for information it seems they are using jQueryMobile pretty heavily (jquerymobile.com) which I think can do a lot of all that for you.

Sebastien
  • 3,583
  • 4
  • 43
  • 82