In the project, the background browser window needs to be fully screened, that is, we click a button to achieve the effect of pressing F11 full screen. In HTML5, W3C has formulated a full-screen API, which can achieve full-screen effects, and can also allow full-screen images, videos, etc. on the page to have full-screen images currently only supported by Google Chrome 15+, safri5.1+, firfox10+, IE11.
full screen
var docElm = ;
//W3C
if () {
();
}
//FireFox
else if () {
();
}
//Chrome etc.
else if () {
();
}
//IE11
else if () {
();
}
Exit full screen
if () {
();
}
else if () {
();
}
else if () {
();
}
else if () {
();
}
Event listening
("fullscreenchange", function () {
= ()? "" : "not ";}, false);
("mozfullscreenchange", function () {
= ()? "" : "not ";}, false);
("webkitfullscreenchange", function () {
= ()? "" : "not ";}, false);
("msfullscreenchange", function () {
= ()? "" : "not ";}, false);
Full screen style settings
We can also use full screen browser to set styles
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}
appendix
1 Online Demo
/fullscreen/
2 HTML5 full screen API phishing
http:///5807
3 jquery encapsulated full screen plug-in
/native-fullscreen-javascript-api-plus-jquery-plugin/
4 More detailed full-screen API introduction
4.1 /en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
4.2 https://dvcs./hg/fullscreen/raw-file/tip/
5 The display difference of HTML5 full screen API in FireFox/Chrome
/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/