如何以编程方式在PWA中将显示从独立显示切换为全屏显示

Question

当我将清单的“显示”设置为“全屏”或“独立”时，我的PWA可以正常工作。但是，我希望我的用户能够在设置中来回切换。有没有办法在JavaScript中以编程方式对此进行切换？

Answer 1

使用document.body.requestFullscreen();

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

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

Answer 2

如果要确保它可以在所有浏览器中使用，请尝试此操作。

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();
    }
}