The iphone's Safari browser is a way to achieve full-screen browsing _ios

Normally, when you open a Web page with your mobile browser, the navigation stays on, so the actual display screen becomes smaller.
Can that be loaded, and the screen will be automatically full-screen? This is what this article is going to discuss.

Add to Home screen

When it comes to Full-screen, having to talk about safari under the iphone is a special and important feature of "ADD to Home". (in the bottom of Safari browser, in the middle of that position, click to select it)
This function is similar to putting the Web address as a hyperlink to the mobile desktop, and can be accessed directly. But note that each link requires JS to do a special deal, that is, listen to the page click event, if it is a link, then use window.location = This.href, so that the page will not jump from the current local window to the browser.
Let's see how the specific code is handled.
In fact, you just need to add some necessary data to the head code:

Copy Code code as follows:

<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"/><!--status bar-->
<!--also need to set up a different size of the boot map, the default is not set automatically to find the root directory of 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 map-->
<link rel= "Apple-touch-startup-image" href= "Startup/startup5.png" media= "(device-height:568px)" >
<!--iPhone4 start map-->
<link rel= "Apple-touch-startup-image" size= "640x920" href= "Startup/startup.png" (media=) " >

Also want to know the specific settings can refer to Apple's official website description: Configuring WEB Applications
Of course, for the startup diagram, I recommend that you use only one picture of 114*114. That

Copy Code code as follows:

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

Full Screen JS code

Copy Code code as follows:

Window.addeventlistener (' domcontentloaded ', function () {
var page = document.getElementById (' page '),
Nav = Window.navigator,
UA = Nav.useragent,
IsFullScreen = Nav.standalone;

if (Ua.indexof (' Android ')!==-1) {
56 corresponds to the height of the Android browser navigation bar
Page.style.height = window.innerheight + + ' px ';
else if (/iphone|ipod|ipad/.test (UA)) {
60 corresponds to the height of the safari 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 gets to the actual screen height. Finally, call the Scrollto method.