How to hide Safari Mobile browser bottom button bar in iPhone?

Question

Following is head section:

Answer 1

For iOS 7.1, you can set this in your header to minimize the UI:

<meta name="viewport" content="width=device-width, minimal-ui">

It was introduced in iOS 7.1 beta 2. This site was instrumental in helping me understand how minimal-ui works: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs

Answer 2

You cannot programmatically hide the toolbar in Mobile Safari.

Your users need to add your web app to their home screens in order for the bars to be hidden when they next launch your app by tapping its icon. This is done by tapping the middle button in the toolbar, then choosing Add to Home Screen. You may need to display a message informing your users to do this.

Answer 3

You can use this litte useful JS project to help your user add the page to the homescreen: Add 2 Home