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

【问题标题】：How to programmatically switch display from standalone to fullscreen in PWA如何在 PWA 中以编程方式将显示从独立切换到全屏
【发布时间】：2019-04-02 13:18:25
【问题描述】：

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

【问题讨论】：

标签： javascript progressive-web-apps

【解决方案1】：

如果您想确保它适用于所有浏览器，请尝试此操作。

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

【讨论】：

document.body.requestFullscreen() 适用于 Windows Chrome 和 Android Chrome。但是Ionic/Cordova下的TypeScript不识别mozRequestFullScreen、webkitRequestFullscreen、msRequestFullscreen需要导入什么？
嗨@Meryan，你应该尝试打开一个新的提要
在这里发帖stackoverflow.com/questions/61283183/…

【解决方案2】：

使用document.body.requestFullscreen();

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

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

【讨论】：