typescript - Angular Material CDK Layout Breakpoints täcker inte iPad Pro-simulatorn i Google Chrome

Jag använder BreakpointObserver för att implementera det responsiva materialdesign i mitt Angular-projekt med följande kod:

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

och sedan

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

Eftersom jag använder Google Chromes skärmstorlekar för att testa fungerar detta bra för iPad, men för iPad Pro (1024 x 1366) returnerar den observerbara $tablet false. Jag kollade API:et och iPad Pro:s skärmdimensioner är inte definierade i Breakpoints.

Vad är den bästa lösningen i detta scenario.

Svar #1

Du kan skicka in en anpassad medieförfrågan i observe-funktionen av this.breakpointObserver. Jag är verkligen dålig på medieförfrågningar, men här är ett exempel som jag gjorde med i princip din kod. Du måste leka lite med värdena för att få det som du vill, men detta borde få dig att komma igång:

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

Det verkar göra det jag förväntar mig när jag använder iPad Pro Chrome-förinställningen.