fix: fix responsive doesn't work in firefox

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();
   }
 }

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>
+  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>