Hide Safari's default elements like headerbar and status bar in iphone devices without scrolling the page

Question

I'm working on a web application where the layout has three sections like Header, Middle Section and Footer. The Layout height is fix as per device screen and scroll will be in middle section only if the content will have more height than middle section's height. So I've applied this meta tags for hiding safari's default elements:

• <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
• <meta name="apple-mobile-web-app-title" content="BestForming">
• <meta name="apple-mobile-web-app-capable" content="yes">
• <meta name="apple-mobile-web-app-status-bar-style" content="black">

But after applying this and when I'm checking in real device I can't find any change in layout it's still display the default elements.

Thanks In Advance...

Answer 1

These metatags are for progressive web apps. You can see the change of these tags only when you do the following steps,

1. Click options and select, 'Add to Homescreen'.
2. Provide a name and save.
3. Exit the browser
4. Click the new icon which is now available in the menu

Now you can see your web app in home screen without the address bar.