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不适用于身体。尝试使用包装并将其应用于该元素：

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和Fullscreen version（使用Fiddle链接查看代码，并使用全屏版本查看其运行，我认为Fiddle不允许全屏显示。）>

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

Answer 2

使元素全屏显示