角材料CDK布局断点未涵盖Google Chrome中的iPad Pro模拟器

Question

I am using BreakpointObserver to implement the responsive material design in my angular project using the following code:

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

and then

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

As I am using Google Chromes screen sizes to test, this is working well for iPad but for iPad pro (1024 x 1366) the observable $tablet returns false . I checked the API and the iPad pro screen dimensions are not defined in Breakpoints .

What is the best work around in this scenario.

Answer 1

You can pass a custom media query in to the observe function of this.breakpointObserver . I'm really awful with media queries, but here's an example that I did using essentially your code. You'll have to play with the values a bit to get it how you want it, but this should get you started:

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

This seems to do what I expect when I use the iPad Pro Chrome preset.