html - 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