我有一個真正的凝灰岩時間讓CSS3檢測全屏。現在，我有：CSS3 Webkit全屏檢測不工作

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

當在我的瀏覽器中打F11時，什麼都不變成紅色。

對於測試，我試圖把一切都變成紅色，但沒有成功。我正在使用Chromium 31.0.1650.57。我錯誤地使用:-webkit-full-screen嗎？

來源

2014-01-24 dman

我試過如下：'：-webkit-全屏*：-moz-全屏*：全屏* {COLOR：＃ f00！重要;背景：＃f00！重要;}'認爲'body'標籤可能不夠用......我猜想使用'*'可能會強制這一切...但它也失敗了。有些文檔可以在這裏找到：https：//developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen，但它表示該技術沒有廣泛支持，它仍然是實驗性的。 – Phlume

我認爲這與你按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 （使用小提琴鏈接查看代碼和全屏版本，以查看它的工作，小提琴不允許全屏我認爲）。

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

來源

2014-01-24 20:50:42 putvande

您是使用http://jsfiddle.net/7kPsL/12/還是http://fiddle.jshell.net/7kPsL/12/show/light。通過小提琴本身它不起作用。但第二個URL的確如此。 – putvande

我正在使用http://jsfiddle.net/7kPsL/12/，但其他鏈接工作。 – dman

它看起來像你正在運行elem.webkitRequestFullscreen（）;在代碼中兩次...在if塊之前一次，在if塊之內一次。我是否正確閱讀？ – dman

使元素進入全屏

像這樣的一些瀏覽器，它可能工作：

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

這項工作做得很好的鉻，FF，MS

來源

2015-02-17 02:25:29 ShapCyber

CSS3 Webkit全屏檢測不工作

回答

在某些瀏覽器可能無法正常工作

相關問題