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，感谢阅读！欢迎评论区留言讨论~