检测浏览器是否移动而无需重新加载页面

Question

Click Me如果我的 flexbox 布局是移动的，我想弄清楚当您单击时如何关闭侧边栏。如果我通过已经知道它是移动的方式刷新移动模式下的浏览器，我可以关闭侧边栏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;

        }

    }