在某些浏览器上可能无效

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和Fullscreen version （使用Fiddle链接查看代码和Fullscreen版本以查看它是否正常工作，Fiddle不允许全屏我认为。）

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

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，ff，ms

很好

CSS3 Webkit全屏检测不起作用

2 个答案:

在某些浏览器上可能无效