js设置页面全屏（js点击全屏）

js设置页面全屏，原文标题：js通过单击按钮实现全屏、退出全屏。

<el-button size="mini" type="success" @click="intScreen">全屏显示</el-button><el-button size="mini" type="success" @click="outScreen">退出全屏</el-button>

// 全屏 intScreen() { var docElm = document.documentElement; if (docElm.RequestFullscreen) { //W3C docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { //FireFox docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { //Chrome等 docElm.webkitRequestFullScreen(); } else if (elem.msRequestFullscreen) { //IE11 elem.msRequestFullscreen(); } }, // 退出全屏 outScreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } },

或者监听屏幕变化的大小进行相应的操作
例如:我这里兼容了两种分辨率下的屏幕.按f11就影藏侧边栏和标题等等

window.addEventListener('resize', ()=> { var height = document.documentElement.clientHeight; var width = document.documentElement.clientWidth; if((height >= 1079 && width == 1920) || (height >= 1049 && width == 1680)){ this.main = true; this.aside = false; }else{ this.main = false; this.aside = true; } })

没了，结束了，是不是很简单呐，如有错误，欢迎留言.如有问题，不吝赐教。
如果此篇博文对您有帮助，还请动动小手点赞 收藏 ⭐留言 呐~，谢谢 ~ ~

随机文章