Full screen browsing in iphone's safari browser

Normally, when you open a web page with your phone's browser, the navigation stays on top, making the actual display screen smaller.
Is it possible to load it and have the screen go full screen? That's what this article is about.

Add to Home Screen

Speaking of full screen, safari under iPhone has a special and important feature called "Add to Home Screen". (right at the bottom of the Safari browser, in the middle, click select)
This function is similar to putting the web address on the mobile desktop as a hyperlink, and can be accessed directly. However, it is important to note that each link requires js to perform a special processing, which is to listen for page clicks. If it is a link, window.location = this.href; So that the page does not jump from the current local window to the browser.
So let's see what the code does.
You just need to add the necessary data to the HEAD code:

<meta name="apple-mobile-web-app-capable" content="yes" /><!-- home screen app  Full screen  -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!--  The status bar  -->
<!--  There is also a need to set different sizes of the startup diagram, default will not be set to automatically find the root directory apple-touch-icon-precomposed.png -->
<!-- home screen app iPhone icon -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="startup/apple-touch-icon-57x57-precomposed.png" />
<!-- home screen app iPad icon -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="startup/apple-touch-icon-72x72-precomposed.png" />
<!-- home screen app iPhone Retinas icon -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="startup/apple-touch-icon-114x114-precomposed.png" />
<!-- home screen app iPad Retinas icon -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="startup/apple-touch-icon-144x144-precomposed.png" />
<!-- iPhone5 Start the figure  -->
<link rel="apple-touch-startup-image" href="startup/startup5.png" media="(device-height:568px)">
<!-- iPhone4 Start the figure  -->
<link rel="apple-touch-startup-image" size="640x920" href="startup/startup.png" media="(device-height:480px)">

If you want to know the specific Settings, please refer to apple's official website: Configuring Web Applications
Of course, I recommend just using a 114 by 114 image for a startup diagram. Namely:

<link rel="apple-touch-icon-precomposed" href="startup/apple-touch-icon-114x114-precomposed.png" />

full screen js code

window.addEventListener('DOMContentLoaded', function() {
    var page = document.getElementById('page'),
        nav = window.navigator,
        ua = nav.userAgent,
        isFullScreen = nav.standalone;
    if (ua.indexOf('Android') !== -1) {
        // 56 The corresponding is Android Browser The height of the navigation bar 
        page.style.height = window.innerHeight + 56 + 'px';
    } else if (/iPhone|iPod|iPad/.test(ua)) {
        // 60 The corresponding is Safari The height of the navigation bar 
        page.style.height = window.innerHeight + (isFullScreen ? 0 : 60) + 'px'
    }
    setTimeout(scrollTo, 0, 0, 1);
}, false);

This code is essentially the height of the current window + the height of the navigation bar to get the real screen height. Finally, the scrollTo method is called.