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
Minimal-UI comparison with a iPhone 5 screen

 

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.

BrimWrapper
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.

  • edincc

    Nice solution. Is there a way to enter fullscreen mode automatically?

  • markusT_inkfood

    Unfortunately, user interaction is necessarily to enter fullscreen mode.

  • Donuts

    Is there a way to pass dynamic values to the Scream config so that multiple devices can be supported?

  • markusT_inkfood

    You could detect the window size with “window.innerWidth,window.innerHeight” to determine the current iPhone version and its resolution.
    Just pass this value into the Scream config and it should work as expected.

  • How you do that? Doesn’t look like Scream accept a width as config.

  • markusT_inkfood

    You should use the width and height to determine the screen size first, once you know which screen size you have to cover pass the values to the Brim wrapper
    line 40-50, values for an iPhone5 Screen

     
        scream = gajus.Scream({
              width: {
                           portrait: 640,
                           landscape: 1144
               }
            });
    
           brim = gajus.Brim({
             viewport: scream
          });
    

  • My bad. I meant height. Why am I detecting height, if Scream not accept height?