js 浏览器全屏

直接上代码。

// 选择全屏的元素
var main = document.body;
// 判断是否全屏
var sort=document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
// 根据状态选择是否全屏
if (sort) {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
} else {
    if (main.requestFullscreen) {
        main.requestFullscreen();
    } else if (main.mozRequestFullScreen) {
        main.mozRequestFullScreen();
    } else if (main.webkitRequestFullScreen) {
        main.webkitRequestFullScreen();
    } else if (main.msRequestFullscreen) {
        main.msRequestFullscreen();
    }
}

可以把代码全部复制到控制台进行测试。

复制上面全部代码到控制台  ->  回车即可。

可能会出现样式的问题，自己更改样式吧。

/* 全屏时元素的样式  (上面的例子指的是body元素) 如，宽度为800px*/
:-webkit-full-screen { 
width:800px;
} 
:-moz-fullscreen { 
width:800px; 
} 
:fullscreen { 
width:800px;
} 

/* deeper elements */ 
:-webkit-full-screen video { 
width: 100%; 
height: 100%; 
} 

/* styling the backdrop */ 
::backdrop { 
/* properties */ 
}