refactor: 全屏判断逻辑调整（#106）

src/global.d.ts

@@ -1,13 +1,16 @@
 interface HTMLElement {
   webkitRequestFullScreen(options?: FullscreenOptions): Promise<void>;
   mozRequestFullScreen(options?: FullscreenOptions): Promise<void>;
+  msRequestFullscreen(options?: FullscreenOptions): Promise<void>;
 }
 
 interface Document {
-  mozFullScreen: boolean;
+  webkitFullscreenElement: Element | null;
-  webkitIsFullScreen: boolean;
+  mozFullScreenElement: Element | null;
-  webkitFullScreen: boolean;
+  msFullscreenElement: Element | null;
+  webkitCurrentFullScreenElement: Element | null;
 
   mozCancelFullScreen(): Promise<void>;
-  webkitCancelFullScreen(): Promise<void>;
+  webkitExitFullscreen(): Promise<void>;
+  msExitFullscreen(): Promise<void>;
 }

src/utils/fullscreen.ts

@@ -4,18 +4,24 @@ export const enterFullscreen = () => {
   if (docElm.requestFullscreen) docElm.requestFullscreen() 
   else if (docElm.mozRequestFullScreen) docElm.mozRequestFullScreen() 
   else if (docElm.webkitRequestFullScreen) docElm.webkitRequestFullScreen()
+  else if (docElm.msRequestFullscreen) docElm.msRequestFullscreen()
 }
 
 // 退出全屏
 export const exitFullscreen = () => {
   if (document.exitFullscreen) document.exitFullscreen()
   else if (document.mozCancelFullScreen) document.mozCancelFullScreen()
-  else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen()
+  else if (document.webkitExitFullscreen) document.webkitExitFullscreen()
+  else if (document.msExitFullscreen) document.msExitFullscreen()
 }
 
 // 判断是否全屏
-export const isFullscreen = () => (
+export const isFullscreen = () => {
-  document.mozFullScreen ||                         
+  const fullscreenElement = 
-  document.webkitIsFullScreen ||       
+    document.fullscreenElement ||
-  document.webkitFullScreen
+    document.mozFullScreenElement ||
-)
+    document.webkitFullscreenElement ||
+    document.msFullscreenElement ||
+    document.webkitCurrentFullScreenElement
+  return !!fullscreenElement
+}

src/views/Screen/hooks/useFullscreen.ts

@@ -8,7 +8,7 @@ export default () => {
 
   const { exitScreening } = useScreening()
 
-  const windowResizeListener = () => {
+  const handleFullscreenChange = () => {
     fullscreenState.value = isFullscreen()
     if (!fullscreenState.value && escExit.value) exitScreening()
 
@@ -17,9 +17,9 @@ export default () => {
 
   onMounted(() => {
     fullscreenState.value = isFullscreen()
-    window.addEventListener('resize', windowResizeListener)
+    document.addEventListener('fullscreenchange', handleFullscreenChange)
   })
-  onUnmounted(() => window.removeEventListener('resize', windowResizeListener))
+  onUnmounted(() => document.removeEventListener('fullscreenchange', handleFullscreenChange))
 
   const manualExitFullscreen = () => {
     if (!fullscreenState.value) return