The minimal-UI meta tag is a iOS specific option, which removes or minifies the user interface in the mobile Safari browser. This was a great way to simulate a full screen experience on iOS devices, since there is still no fullscreen api for these devices. Unfortunately, since iOS8, the minimal-UI tag was removed.
Therfore we need a workaround to get back to fullscreen. There is already a working solution called Brim. Brim solves all of the issues associated with determining the state of the UI and controlling the persistence.
It’s only necessarily to use the Brim wrapper if you need a fullscreen in portrait mode.Mobile Safari will go into fullscreen in landscape mode by itself.
go fullscreen
There is already a great quick-start guide available at the github page of the Brim wrapper. There is no need to replicate it, instead I’m going to explain how to use Phasers game engine to go fullscreen while playing a game or having a webApp in fullscreen.
There are two dependencies that are required to get the Brim wrapper working, Scream and platform.js.
<body>
<div id="brim-mask">
<!-- Content displayed to the user when in full view. -->
<p>swipe up to go fullscreen</p>
<p>↑</p>
</div>
<div id="brim-main">
<div id="orientation"></div>
<!-- Content displayed to the user when in minimal view. -->
</div>
<div id="not-ios-8">
</div>
<script type="text/javascript">
(function () {
var scream;
var brim;
//IS ALREAD LOADED
var firstTime = true;
//APPEND CANVAS TO THIS ELEMENT
var domElement;
//SET BASE SIZE
var width = 640;
var height = 960;
//CHECK FOR IOS8 AND IF ITS NOT IN STANDALONE MODE
if ((platform.os.family == 'iOS' && parseInt(platform.os.version, 10) > 8 || platform.ua.indexOf('like Mac OS X') != -1)&&("standalone" in window.navigator) &&!window.navigator.standalone)
{
scream = gajus.Scream({
width: {
portrait: 640,
landscape: 1144
}
});
brim = gajus.Brim({
viewport: scream
});
//YOU ARE ON IOS SET FULL SCREEN SIZE
height = scream.getViewportHeight();
width = scream.getViewportWidth();
brim.on('viewchange', function (e) {
document.body.className = e.viewName;
//WRONG ORIENTATION SHOW IMAGE
if(scream.getOrientation() == "landscape")
{
document.getElementById('orientation').style.display = 'block';
};
if(firstTime && e.viewName=="minimal")
{
//DO ONLY ONCE AT STARTUP
firstTime = false;
//SET THE RIGHT DOM ELEMENT
domElement = document.querySelector('#brim-main');
//CREATE PHASER CANVAS
createPhaser();
};
});
}
else
{
//ITS NOT IOS START STANDARD
if(firstTime)
{
//DO ONLY ONCE AT STARTUP
firstTime = false;
document.querySelector('#not-ios-8').style.display = 'block';
//SET THE RIGHT DOM ELEMENT
domElement = document.querySelector('#not-ios-8');
//CREATE PHASER CANVAS
createPhaser();
}
};
function createPhaser()
{
//CREATE A PHASER CANVAS WITH THE RIGHT HEIGHT AND WIDTH VALUES
var game = new Phaser.Game(width, height, Phaser.AUTO, domElement);
game.state.add('Boot', BasicGame.Boot);
game.state.add('Preloader', BasicGame.Preloader);
game.state.add('MainMenu', BasicGame.MainMenu);
game.state.add('Game', BasicGame.Game);
game.state.start('Boot');
}
})();
</script>
</body>
We check first if we are on an iOs device, if so make the brim wrapper ready and wait for user input. Otherwise use the standard width and height values and start creating the Phaser canvas.
If we are on a iOS device and the user input happens, the brim wrapper will scroll in and the full size of the screen will be available for the Phaser canvas. Wait till the wrapper is fully scrolled set the full width and height values and create the Phaser canvas accordingly. The final result is a fullscreen view in portait mode. User input is required to enter fullscreen mode.
conclusion
Going fullscreen on iOS device is sometime necessarily and helpful, especially in portrait mode. Increasing the usable screen size gives a way more native feel to your webApp or game. Maybe there will be a fullscreen API for iOS devices in the future. Until then the Brim wrapper might be the best solution.