So youβve created a nice, mobile-friendly website. But now you want it to seem a little more βapp-like".
On iOS, you can create a icon on the home screen by using the βAdd to Home Screen" button in Safari.
This nicely hides the browser toolbar at the top. Unfortunately the footer toolbar is still visible.
Hereβs where the apple-mobile-web-app-capable meta tag comes in.
Adding the following meta-tag causes Safari to hide both toolbars and run in fullscreen mode.
<meta name="apple-mobile-web-app-capable" content="yes">
Thereβs one big limitation with apple-mobile-web-app-capable though.
By default, it only persists for that single page. Any links to other pages of the same site will pop open Safari and youβll be stuck with a page that isnβt running fullscreen anymore.
Luckily thereβs an easy Javascript workaround.
if(window.navigator.standalone) { $(document).delegate('a', 'click', function(e) { e.preventDefault(); location.href = $( event.target ).attr( "href" ); });}