Контрольные точки макета Angular Material CDK не охватывают симулятор iPad Pro в Google Chrome

Question

Я использую BreakpointObserver для реализации проекта адаптивного материала в моем угловом проекте, используя следующий код:

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 возвращает false.Я проверил API и размеры экрана iPad pro не определены в Breakpoints.

Что лучше всего обойти в этом сценарии.

Answer 1

Вы можете передать пользовательский медиа-запрос в функцию observe this.breakpointObserver.Я действительно ужасен с медиа-запросами, но вот пример, который я сделал, используя, по сути, ваш код.Вам придется немного поиграть со значениями, чтобы получить то, что вы хотите, но это должно помочь вам начать:

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

Это похоже на то, что я ожидаю, когда использую предустановку iPad Pro Chrome.