代码之家  ›  专栏  ›  技术社区  ›  Umair M

角度材质CDK布局断点不包括谷歌Chrome中的iPad pro模拟器

  •  0
  • Umair M  · 技术社区  · 6 年前

    我在用 BreakpointObserver 使用以下代码在我的angular项目中实现响应材料设计:

    tablet$: Observable<boolean> = this.breakpointObserver
    .observe([Breakpoints.Tablet])
    .pipe(map(result => result.matches), tap(() => this.changeDetectorRef.detectChanges()));
    

    然后

    this.tablet$.subscribe(isTablet => {
      this.isTablet = isTablet;
      console.log('IsTablet:' + this.isTablet);
    });
    

    当我使用谷歌Chromes屏幕尺寸进行测试时,这在iPad上运行良好,但在iPad pro(1024 x 1366)上,可观察到 $tablet 返回 false .我检查了API,iPad pro屏幕尺寸未在中定义 Breakpoints .

    在这种情况下,最好的解决方法是什么。

    0 回复  |  直到 6 年前
        1
  •  1
  •   Engineer_Andrew    6 年前

    您可以将自定义媒体查询传递到 observe 功能 this.breakpointObserver .我对媒体查询非常糟糕,但这里有一个例子,我基本上使用了你的代码。你必须稍微利用这些价值观才能得到你想要的结果,但这应该让你开始:

    this.iPadProObservable = this.breakpointObserver.observe('(max-width: 1024px)')
      .pipe(
        map(result => result.matches),
        tap(() => this.changeDetectorRef.detectChanges())
      );
    

    当我使用iPad Pro Chrome预设时,这似乎达到了我预期的效果。