次のコードを使用して、BreakpointObserverを使用して、Angularプロジェクトにレスポンシブマテリアルデザインを実装しています。
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);
});
テストにGoogleChromeの画面サイズを使用しているので、これはiPadではうまく機能しますが、iPad pro（1024 x 1366）では観察可能な$tabletリターンが得られますfalse。APIを確認しましたが、iPadproの画面サイズがで定義されていませんBreakpoints。
このシナリオでの最善の回避策は何ですか。
カスタムメディアクエリをのobserve関数に渡すことができますthis.breakpointObserver。私はメディアクエリに本当にひどいです、しかしこれは私が本質的にあなたのコードを使ってした例です。希望どおりに取得するには、値を少し操作する必要がありますが、これで開始できます。
this.iPadProObservable = this.breakpointObserver.observe('(max-width: 1024px)')
.pipe(
map(result => result.matches),
tap(() => this.changeDetectorRef.detectChanges())
);
これは、iPad ProChromeプリセットを使用したときに期待することを実行しているようです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加