minimal-UI on iOS8


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.

overview

go fullscreen

BrimWrapper

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>&#8593</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.