CODEWITHSUNDEEP
angulartypescriptlayoutangular-materialresponsive
Umair M
Umair M

Reputation: 10750

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

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.

Upvotes: 2

Views: 1381

Answers (1)

Engineer_Andrew
Engineer_Andrew

Reputation: 604

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.

Upvotes: 1

Related Questions