检测浏览器是否在没有页面重新加载的情况下移动

Question

如果我的 flexbox 布局是移动的，我正试图弄清楚当您单击 Click Me 时如何关闭侧边栏。如果我通过 isMobile 在移动模式下刷新浏览器，我可以关闭侧边栏，因为它已经知道它是移动的，但是如果用户有浏览器并将宽度缩小到移动视图，我也希望它关闭。 npmjs 库isMobile 不知道它是移动的，除非页面重新加载。 感谢您的帮助！

<mat-sidenav-container class="sidebar-container">


  <mat-sidenav [(opened)]="isOpen" #sidenav id="sideNav" mode="side" ngif="filtersVisible" opened>
    <div class="loading">


    </div>
    <div id="spacing1"></div>


    <mat-nav-list>
      <div id="topLinks">

      </div>

      <div class="loading">

        <ngx-spinner id="loadingIcon" *ngIf="isLoading" type="ball-spin-clockwise" size="medium" color="#3071a9">
        </ngx-spinner>

      </div>

      <a mat-list-item class="navList"><label routerLink="/store" (click)="closeSidebar()" onclick="return false;"
          class="menuOptions" routerLinkActive="active-list-item"><a href="#">Click Me</a></label></a>
      <hr>

      </label></a>
      <hr *ngIf="this.role === 'Admin'">

    </mat-nav-list>

  </mat-sidenav>



  <mat-sidenav-content>

    <div id="spacing"></div>
    <router-outlet>
    </router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

 closeSidebar() {
    if (this.mobile || this.tablet) {
      this.isOpen = false;
      this.store.dispatch({ type: "false" });
    }
  }

Answer 1

试试这个： 服务-

        import { Injectable } from '@angular/core';
        const SMALL_WIDTH_BREAKPOINT = 720;
        @Injectable({
         providedIn: 'root'
         })
    export class ScreenSizeService {
     private mediaMatcher: MediaQueryList =
      matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);

      constructor(  
      ) {}
     isScreenSmall(): boolean {
     return this.mediaMatcher.matches;
    }
  }
    

在组件中使用：

isScreenSmall: boolean;

@HostListener('window:resize') onresize() {
  this.isScreenSmall= this.service.isScreenSmall();
}
  constructor(private service: ScreenSizeService
  ) { }

Answer 2

提到的 isMobile 库依赖于用户代理字符串，所以它基本上不应该需要另一个页面加载。

但是，通常只有移动设备支持“TouchEvent”。您可以使用它来检查它是否可能是移动设备，而无需依赖用户代理

    function isTouch() {
        try {
          document.createEvent('TouchEvent');
          return true;
        }
        catch (e) {
          return false;
        }
    }