CSS for iPhone full-screen mode
To enable full screen mode compatibility with your website simply include the following line in the head.
<meta name=”apple-mobile-web-app-capable” content=”yes” />
With this line of code added, users will see a full screen version of your website (sans browser chrome) if they add the site to their homescreen and launch it from there.
A problem one may run into with the availability of the full screen version is, because of the extra space, one may want to edit their CSS to accomodate users viewing in full-screen mode.
To do this, just check if a user is in full-screen mode and then add a new stylesheet to the head of your site. Feel free to use the following code:
//check if in full-screen
if(window.navigator.standalone){
var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "assets/css/fullscreen.css";
document.getElementsByTagName("head")[0].appendChild(ss);
}
Now simply edit fullscreen.css to make modifications to the appearance of your site in the iPhone’s full-screen mode.
