FullScreen iFrame using Javascript in iOS [Safari]

Question

I set up full screen functions:

function setUpFullScreen() {
    document.cancelFullScreen = document.webkitCancelFullScreen || document.mozCancelFullScreen || document.cancelFullScreen;
    document.body.requestFullScreen = document.body.webkitRequestFullScreen || document.body.mozRequestFullScreen || document.body.requestFullScreen;
    document.onfullscreenchange = document.onfullscreenchange || document.onwebkitfullscreenchange || document.onmozfullscreenchange;
    if (document.addEventListener) {
        document.addEventListener('webkitfullscreenchange', fullscreenChangeHandler, false);
        document.addEventListener('mozfullscreenchange', fullscreenChangeHandler, false);
        document.addEventListener('fullscreenchange', fullscreenChangeHandler, false);
        document.addEventListener('MSFullscreenChange', fullscreenChangeHandler, false);
    }
}

And toggle FullScreen using:

function toggleFullScreen() {
    if (isFullScreen()) {
        trace("Exiting fullscreen.");
        document.querySelector("svg#fullscreen title").textContent = "Enter fullscreen";
        document.cancelFullScreen();
    } else {
        trace("Entering fullscreen.");
        document.querySelector("svg#fullscreen title").textContent = "Exit fullscreen";
        document.body.requestFullScreen();
    }
}

Check is full screen:

function isFullScreen() {
    return !!(document.webkitIsFullScreen || document.mozFullScreen || document.isFullScreen);
}

Toggling fullscreen works on Chrome, Safari, Firefox (on Desktop) and also Chrome on Android. However, NOT WORKING on Safari and Chrome. I see the following error on safari:

TypeError: document.body.requestFullScreen is not a function. (In 'document.body.requestFullScreen()', 'document.body.requestFullScreen' is undefined)

How to accomplish fullscreen functionality on iOS using javascript?

FYI: My code is an adaptation of https://appr.tc/ https://github.com/webrtc/apprtc/blob/master/src/web_app/js/appcontroller.js

Answer 1

Using:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

in the HTML file worked for me.