From 839482812aa01abf976a357eeb683feb1f739cd1 Mon Sep 17 00:00:00 2001
From: Eve-Sama <panshiming@exiao.tech>
Date: Fri, 12 Aug 2022 18:08:15 +0800
Subject: [PATCH] fix: fix responsive doesn't work in firefox

---
 src/app/app.component.ts                 | 29 ++++++++++++++++++++----
 src/app/document/document.component.html |  8 +++++--
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index bfa8771..7c13cce 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
 import { Router } from '@angular/router';
 
@@ -8,14 +8,33 @@ import { Router } from '@angular/router';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-  constructor(private platform: Platform, private router: Router) {}
+  private mode: 'mobile' | 'document';
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.judgeMode();
+  }
+
+  private judgeMode(): void {
+    const newMode: 'mobile' | 'document' = this.isMobile() ? 'mobile' : 'document';
+    if (newMode !== this.mode) {
+      this.mode = newMode;
+      this.router.navigate([`/${newMode}`]);
+      console.log('jump');
+    }
+  }
 
   private isMobile(): boolean {
-    return this.platform.ANDROID || this.platform.IOS;
+    if (this.platform.ANDROID || this.platform.IOS) {
+      return true;
+    }
+    // The Platform doesn't work in firefox when open the responsive mode, therfore use innerWidth
+    return window.innerWidth <= 400;
   }
 
+  constructor(private platform: Platform, private router: Router) {}
+
   ngOnInit(): void {
-    const url = this.isMobile() ? '/mobile' : '/document';
-    this.router.navigate([url]);
+    this.judgeMode();
   }
 }
diff --git a/src/app/document/document.component.html b/src/app/document/document.component.html
index 912feee..11e8c2e 100644
--- a/src/app/document/document.component.html
+++ b/src/app/document/document.component.html
@@ -53,5 +53,9 @@
   </div>
 </div>
 <div class="tip">
-  You can see a demo in the mode of mobile in browser(need refresh if change mode from pc) or phone. Have a try?
-</div>
\ No newline at end of file
+  If you wanna see a demo in mobile. You have 2 options.
+  <ul>
+    <li>Open the responsive mode via browser console(doesn't work in firefox)</li>
+    <li>Adjust width of window less than 400px</li>
+  </ul>
+</div>