IOS10 fullscreen safari Javascript

Question

I'm trying to make a div go fullscreen, when a user clicks a button on a website.

Only thing is, every browser seems to want to work except for Safari on IOS.

What will I need to do to be able to make it fullscreen? I've tried researching, but unable to find anything.

Heres my current code:

<script type="text/javascript">
function goFullscreen(id) {
    var element = document.getElementById(id); 

    var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
        (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
        (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
        (document.msFullscreenElement && document.msFullscreenElement !== null);

    var docElm = document.documentElement;
    if (!isInFullScreen) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
           element.webkitRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}
</script>

Answer 1

As mentioned on many posts, there is no way to switch to fullscreen on IOS >=10 in Safari and Chrome. It is because the Fullscreen API is not supported:

• Can I Use Full Screen API
• open webpage in fullscreen in Safari on iOS
• Full screen api HTML5 and Safari (iOS 6)

You have two possible tricks:

• Inform the user to switch to landscape mode . Indeed, you can't hardcode this and iOS Chrome can't do this too ( Prevent orientation change in iOS Safari ).
• if your webpage is exported in a web app and you configure the meta balizes correctly ( Optimizing Full Screen Mobile Web App for iOS ).