1、监听是否全屏（F11效果）
原生js自带的方法，试过，好像都不是很好用，自己整理了一下
思路
1、获取当前窗口的高度和宽度；
2、获取可视区域的高度和宽度；
3、进行对比，是否一样大小；
备注：个人觉得只需要判断两者的高度是否一致即可，因为全屏一般情况只是高度会变化，谨慎起见可以宽高都对比一下(我开发中只对比了高度，暂时未发现问题)
代码
以下是在vue中的用法，isFullScreen是判断是否全屏的data中的一个属性
data() {
isFullScreen: false,
},
methods: {
judegIsFullScreen() {
window.onresize = () => {
// 可视区域的高度
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
// screen是window的属性方法，window.screen可省略window，指的是窗口
this.isFullScreen = screen.height == clientHeight
}
},
}
2、开启和退出全屏的方法
开启全屏
vue中一般都是id为app的元素为根元素，所以相当于是把#app开启全屏
requestFullScreen() {
//开启全屏
let element = document.getElementById('app')
let requestMethod =
element.requestFullScreen || //w3c
element.webkitRequestFullScreen || // Chrome等
element.mozRequestFullScreen || // FireFox
element.msRequestFullScreen // IE11
if (requestMethod) {
requestMethod.call(element)
}
}
退出全屏
exitFullscreen() {
//退出全屏
if (document.exitFullScreen) {
document.exitFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
}
END，感谢阅读！欢迎评论区留言讨论~
