Angular Material CDK Layout Breakpoints 不涵盖 iPad Google Chrome 中的专业模拟器

Question

我正在使用 BreakpointObserver 在我的 angular 项目中使用以下代码实现响应式 material 设计：

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

因为我正在使用 Google Chromes 屏幕尺寸进行测试，这对 iPad 来说效果很好，但对于 iPad pro (1024 x 1366) 可观察 $tablet returnsfalse。我检查了 API 并且 iPad pro 屏幕尺寸未在 Breakpoints 中定义。

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

Answer 1

您可以将自定义媒体查询传递给 this.breakpointObserver 的 observe 函数。我对媒体查询真的很糟糕，但这是我使用您的代码所做的一个示例。您必须稍微调整一下这些值才能按照您的意愿获得它，但这应该可以帮助您入门：

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

当我使用 iPad Pro Chrome 预设时，这似乎符合我的预期。

Angular Material CDK Layout Breakpoints 不涵盖 iPad Google Chrome 中的专业模拟器

Angular Material CDK Layout Breakpoints doesn't cover iPad pro simulator in Google Chrome

layout

typescript

angular-material

responsive

angular