时间戳

首页 > 解决方案 > 检测浏览器是否在没有页面重新加载的情况下移动

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

问题描述

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

标签： javascriptangularflexbox

解决方案

试试这个：服务-

        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
  ) { }

推荐阅读