Full Screen Mode For Your Website
August 2, 2018 by Andreas Wik
I recently launched a game – Submarine Popper – and as you play the game in your web browser I wanted to give the player the ability to turn the page into full screen mode.
It literally took no more than a few minutes to implement it – let’s have a look at how.
A really helpful library for this is ScreenFull.js – it gets all the quirks and cross browser issues out of the way and lets us make a simple call, and voila, we’re full screen.
Grab screenfull.js from a CDN or download it from GitHub and include it on your page.
<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.3.2/screenfull.min.js"></script>
Now, first thing we need to do is to check if full screen mode is available on the user’s device. We can easily get an answer to that question by checking if screenfull.enabled is true or false. If true, then we can go ahead and call screenfull.toggle which will toggle between full screen / not full screen.
if(screenfull.enabled) {
screenfull.toggle();
}
Try it out with the CodePen below:
See the Pen Toggle Fullscreen by Andreas Wik (@andreaswik) on CodePen.
If you want to find out whether the user is currently full screen, you can use screenfull.isFullscreen
For more details about the abilities of this library, check it out on GitHub.
Share this article
