如何在 Chrome Mobile 中从全屏模式返回

Question

我在 Chrome Mobile 中从全屏模式返回时遇到问题。 我找到了一些全屏示例并添加了一项功能。当浏览器处于全屏模式时，图像边框为红色。

#root:-webkit-full-screen  > .img-wrap > .img-01
{
    border: 2px solid red;
}

您可以在此处找到示例应用程序： https://codepen.io/herrmefisto/pen/eraKKg

如果您单击按钮，它将以全屏模式打开，并且图像边框将为红色。如果你按下“Esc”按钮，那么边框仍然是红色的！！在真正的 android 设备上 Esc == 后退按钮。

我还发现按下键盘上的 Esc 按钮时不会触发事件：webkitfullscreenchange、mozfullscreenchange、fullscreenchange、MSFullscreenChange。

像 e.q BigScreen (https://brad.is/coding/BigScreen/) 这样的库（跨浏览器）很少，但这里也存在这个错误。

有人知道如何进行一些破解/解决方法以使其正常工作吗？

在桌面版 Chrome (ver 66) 中运行良好。

Answer 1

全屏在 SO sn-p 中不可用，所以我在 codepen.io 上用“exitHandler”方法更改了您的版本的fork。从此：

function exitHandler() {
    if (
       !document.webkitIsFullScreen 
       && !document.mozFullScreen 
       && !document.msFullscreenElement) {
        console.log("asdasd");
    }
}

到这里：

function exitHandler() {
    if (
        document.webkitIsFullScreen === false 
        || document.mozFullScreen === false 
        || document.msFullscreenElement === false
    ) {
        alert("exit fullscreen");
    }
}

在我的 Android 设备（不是三星 Galaxy A5）上，Chrome v.66.0.3359.158 处于全屏模式，按 Esc 键会显示警报，因此会触发“webkitfullscreenchange”退出事件。退出全屏模式后，图片的边框颜色也会发生变化。

但在设备工具栏中的适用于 Windows 的 Google Chrome v.66.0.3359.181 中，没有任何设备会触发全屏退出事件。但是，如果您选择“响应式”，那么任何屏幕尺寸都可以。如果没有人对此有posted a bug，那么您应该这样做。