How to get full screen mode with a mobile safari web app on IOS 8 Iphone 4S

Question

I am very new to mobile development so please don't knock me to much for newbie questions.

I think I have the correct meta tags.

<meta name="viewport" content="width=device-width, initial-scale=1">

From apples site it said use the below tag to allow running in full screen mode but it does not seem to work.

<!-- Allow web app to be run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable"
      content="yes">

Width and Height are set for Iphone 4S on IOS 8

  width: 320px;
  height: 480px

I can post the full code if it will help it is very simple 1 page layout header with two buttons, content just text, and a footer with nav icons

The problem as I see it is that it is not full screen and because of this the IOS navigation bar at the bottom cuts off my footer which has an icon menu

Answer 1

I figured it out, the meta tags are correct, you just have to create a shortcut on the home screen by clicking on the up arrow box on the bottom bar in safari and choosing add to home screen. Then launch your app and presto bars are gone. Just browsing to say 192.../yourapp does not work you have to add a shortcut to the homescreen to remove bars