How to programmatically switch display from standalone to fullscreen in PWA

问题

My PWA works as expected when I set the "display" of my manifest to "fullscreen" or "standalone". But, I want my users to be able to toggle back and forth in settings. Is there a way to switch this programmatically in JavaScript?

回答1:

try this if you want to be sure that it will work in all browsers.

function getFullScreen() {
    if (document.body.requestFullscreen) {
        document.body.requestFullscreen();
    } else if (document.body.mozRequestFullScreen) { /* Firefox */
        document.body.mozRequestFullScreen();
    } else if (document.body.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        document.body.webkitRequestFullscreen();
    } else if (document.body.msRequestFullscreen) { /* IE/Edge */
        document.body.msRequestFullscreen();
    }
}

回答2:

use document.body.requestFullscreen();

var videoElement = document.getElementById("videoElement");
videoElement.requestFullscreen();

Check https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

来源：https://stackoverflow.com/questions/53048372/how-to-programmatically-switch-display-from-standalone-to-fullscreen-in-pwa