CSS3 Webkit全屏检测不起作用

Question

我有一个真正的凝灰岩时间让CSS3检测到全屏.现在,我有:

:-webkit-full-screen body {
    color: red;
    background: red;
}

在浏览器中点击F11时,没有任何内容变为红色.

为了测试,我试图把一切变成红色但没有成功.我使用的是Chromium 31.0.1650.57.我使用:-webkit-full-screen不正确吗？

Answer 1

我认为这与你按F11以获得全屏有关.您需要触发全屏通过webkitRequestFullscreen以及其他跨浏览器版本.另外,我认为CSS不适用于身体.尝试使用包装器并将其应用于该元素:

HTML(包装器应用于:-webkit-full-screen:

<div id="wrapper"> 
    <a href="#" id="gofullscreen">fullscreen</a>
</div>

CSS:

 html, body {
     width: 100%;
     height: 100%;
 }
 #wrapper {
     height: 100%;
     width: 100%;
 }

 :-webkit-full-screen #wrapper {
     color: red;
     background: red;
 }

用于触发全屏的JavaScript:

document.getElementById('gofullscreen').addEventListener('click', function () {
    var elem = document.getElementsByTagName("body")[0];
    elem.webkitRequestFullscreen();
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    }
});

请参阅小提琴和全屏版本 (使用小提琴链接查看代码和全屏版本以查看其工作情况,Fiddle不允许全屏我认为).

但是:-webkit-full-screen等等是实验性的,所以不要依赖它. https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode