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（第66版）中，它运行正常。

Answer 1

全屏在SO片段中不可用，因此我在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”退出事件。退出全屏模式后，图片的边框颜色也会发生变化。

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

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

1 个答案: