Question

我正在使用以下脚本让我的网络应用程序全屏显示...

function enterFullscreen(){
    var element = document.getElementById('container');
    if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
    l('Fullscreen Mode entered','internal');
}

所以，当我通过$('button.toggle-fullscreen').click(function(){ enterFullscreen(); });点击触发按钮时，我确实进入全屏，只有我的元素变黑。只是黑色，没有别的。

任何人都知道如何解决这个问题？

仅供参考我正在使用Chrome 27。

Answer 1

浏览器的全屏“视觉环境”的默认背景颜色为黑色。您的内容实际上是，但它目前是黑色背景上的黑色文字，因此您无法看到它（尝试突出显示或按Ctrl+A自己查看）。

如果要使背景成为不同的颜色，则必须指定CSS规则以将background-color属性设置为默认值以外的其他属性。所以，在你的情况下：

#container:fullscreen {
    background-color: rgba(255,255,255,0);
}
#container:-webkit-full-screen {
    background-color: rgba(255,255,255,0);
}
#container:-moz-full-screen {
    background-color: rgba(255,255,255,0);
}

应该做的伎俩。（确保使用相应的供应商版本 - :-webkit-full-screen和:-moz-full-screen - 直到规范最终确定; see MDN for more information。）

事实上，也许只是

*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    background-color: rgba(255,255,255,0);
}

@DevilishDB编辑：使用rgba作为透明BG并添加*选择器以使前一个工作

Answer 2

我不知道您问题的确切答案，但这些信息可能有所帮助：

我与enterFullscreen(document.body);有类似的黑背景问题。将行更改为enterFullscreen(document.documentElement);后，背景颜色变为正常。我使用的CSS是body{background-color: #D7D7D7; margin: 0px;}。

Answer 3

不知道为什么，但似乎身体元素的背景没有全屏显示或变得透明......

我通过为html元素设置背景颜色来修复它，它工作得很好：

html {
    background-color: #ffffff;
    /* Or any color / image you want */
}

Answer 4

没有其他答案对我有用（Chrome 70或FF 63）

将其添加到CSS文件中确实有效

::backdrop
{
    background-color: white;
}

Answer 5

我花了几个小时来找到解决这个问题的窍门。

我结束了：

将白色固定为背景
并使用z-index将其向下推

然后：

为HTML页面内容添加白色
并使用z-index将其向上推（在背景上方）

它在Firefox和Chrome上对我有效

::backdrop {
    z-index:0;  
    background-color: white !important;
}

html, *:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    background-color: white !important;
    z-index:1;
}

Answer 6

可接受的答案适用于大多数浏览器，但在我的测试中不适用于IE11。对我来说，这适用于iOS上的当前Chrome，Firefox，Edge，IE 11和Safari：

CSS：

body {
    background-color: #ffffff;
}

JS：

function openFullscreen () {
    let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    let elem = isSafari ? document.documentElement : document.body;
    let openFn = elem.requestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen || elem.msRequestFullscreen;
    if (openFn) {
        openFn.call(elem);
    }
};

编辑：为iOS / Safari添加了例外，该例外不适用于使用body元素。

使用HTML5进入全屏时，背景/元素变黑

6 个答案: