CSS3 Webkit Full Screen Detection Not Working

问题

I am having a really tuff time getting CSS3 to detect full screen. Right now, I have:

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

When hitting F11 in my browser, nothing turns red.

For testing, I am trying to turn everything red but not having success. I am using Chromium 31.0.1650.57. Am I using :-webkit-full-screen incorrectly?

回答1:

I think this has something to do with you pressing F11 to get fullscreen. You need to trigger the fullscreen via webkitRequestFullscreen and the other cross-browser versions of this. Also, I think that the CSS doesn't apply to the body. Try to use a wrapper and apply it to that element:

HTML (wrapper to apply the :-webkit-full-screen to:

<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 to trigger the fullscreen:

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

See Fiddle and Fullscreen version (Use the Fiddle link to see the code and the Fullscreen version to see it working, Fiddle doesn't allow fullscreen I think).

But the :-webkit-full-screen and the like are experimental, so don't rely on it. https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

回答2:

Making an element go full-screen

Like this on some browser it may work:

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%;
}

On some browser it might not work

To make it work across regardless of standard Css

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

This work well on chrome , ff , ms

来源：https://stackoverflow.com/questions/21341888/css3-webkit-full-screen-detection-not-working