我在使用CSS3检测全屏时遇到了一些困难。目前,我的代码如下:
:-webkit-full-screen body {
color: red;
background: red;
}
当我在浏览器中按下F11时,没有任何东西变成红色。 为了测试,我试图把所有东西都变成红色,但没有成功。我使用的是Chromium 31.0.1650.57。我是否错误地使用了:-webkit-full-screen?
我认为这与您按下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>
:-webkit-full-screen
和类似的东西都是实验性的,所以不要依赖它们。https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode。使元素全屏显示
在某些浏览器上可能会像这样工作:
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()});
:-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