CSS3 Webkit全屏检测不起作用

Question

我在使用CSS3检测全屏时遇到了一些困难。目前，我的代码如下：

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

当我在浏览器中按下F11时，没有任何东西变成红色。 为了测试，我试图把所有东西都变成红色，但没有成功。我使用的是Chromium 31.0.1650.57。我是否错误地使用了:-webkit-full-screen？

- dman

---

我尝试了以下代码：:-webkit-full-screen *，:-moz-full-screen *，:fullscreen * {color: #f00!important;background: #f00!important;}，以为只使用 body 标签不够，所以使用 * 号来尝试一下，但是也失败了。关于此问题，可以在此处找到一些文档：https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen ，但是它明确说明此技术并不被广泛支持，仍处于实验阶段。 - Phlume

Answer 1

我认为这与您按下F11键进入全屏有关。您需要通过webkitRequestFullscreen和其他跨浏览器版本来触发全屏。此外，我认为CSS不适用于body元素。 尝试使用包装器并将其应用于该元素：

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

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

#wrapper {
  height: 100%;
  width: 100%;
}

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

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

请看Fiddle和全屏演示版本。（使用Fiddle链接查看代码，使用全屏版本查看其工作情况，我认为Fiddle不允许全屏显示）。

但是:-webkit-full-screen和类似的东西都是实验性的，所以不要依赖它们。https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode。

- putvande

---

你是在使用 http://jsfiddle.net/7kPsL/12/ 还是 http://fiddle.jshell.net/7kPsL/12/show/light？通过 Fiddle 本身它无法工作。但第二个 URL 可以。 - putvande

看起来你在代码中运行了 elem.webkitRequestFullscreen() 两次...一次是在 if 块之前，另一次是在 if 块内部。我理解得对吗？ - dman

Answer 2

使元素全屏显示

在某些浏览器上可能会像这样工作:

function gofullscreen() {
        var elem = document.getElementById("VideoWrapper");
        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();
        }
    }
$("#buttonGo").click(function(){gofullscreen()});

**//CSS**   

:-webkit-full-screen #VideoWrapper {
    color: red;
    background: red;
  width: 100%;
  height: 100%;
}

:-moz-full-screen #VideoWrapper {
    color: red;
    background: red;
  width: 100%;
  height: 100%;
}

:-ms-fullscreen #VideoWrapper {
    color: red;
    background: red;
  width: 100%;
  height: 100%;
}

:full-screen #VideoWrapper {
    color: red;
    background: red;
  width: 100%;
  height: 100%;
}

:fullscreen #VideoWrapper {
    color: red;
    background: red;
  width: 100%;
  height: 100%;
}

在某些浏览器上可能无法正常工作

为了使其跨标准Css工作

$("#buttonGo").click(function(){
$("#VideoWrapper").css({height: '100%',width:'100%',background:'red',color:'red'});
gofullscreen()});

这在Chrome、Firefox和Microsoft浏览器上都运行良好。

- ShapCyber