Update env service added matcher for screen sizes

apps/core/environment/src/lib/environment.service.ts

@@ -1,17 +1,52 @@
 import { Injectable } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
 import { NativeContainerService } from 'native-container';
+import { BreakpointObserver } from '@angular/cdk/layout';
+
+const MATCH_TABLET = '(max-width: 1023px)';
+
+const MATCH_DESKTOP_SMALL = '(min-width: 1024px and max-width: 1439px)';
+
+const MATCH_DESKTOP = '(min-width: 1440px)';
 
 @Injectable({
   providedIn: 'root',
 })
 export class EnvironmentService {
-  constructor(private _platform: Platform, private _nativeContainer: NativeContainerService) {}
+  constructor(
+    private _platform: Platform,
+    private _nativeContainer: NativeContainerService,
+    private _breakpointObserver: BreakpointObserver
+  ) {}
 
+  matchTablet(): boolean {
+    return this._breakpointObserver.isMatched(MATCH_TABLET);
+  }
+
+  matchTablet$ = this._breakpointObserver.observe(MATCH_TABLET);
+
+  matchDesktopSmall(): boolean {
+    return this._breakpointObserver.isMatched(MATCH_DESKTOP_SMALL);
+  }
+
+  matchDesktopSmall$ = this._breakpointObserver.observe(MATCH_DESKTOP_SMALL);
+
+  matchDesktop(): boolean {
+    return this._breakpointObserver.isMatched(MATCH_DESKTOP);
+  }
+
+  matchDesktop$ = this._breakpointObserver.observe(MATCH_DESKTOP);
+
+  /**
+   * @deprecated Use `matchDesktopSmall` or 'matchDesktop' instead.
+   */
   isDesktop(): boolean {
     return !this.isTablet();
   }
 
+  /**
+   * @deprecated Use `matchTablet` instead.
+   */
   isTablet(): boolean {
     return this.isNative() || this.isSafari();
   }
@@ -21,6 +56,6 @@ export class EnvironmentService {
   }
 
   isSafari(): boolean {
-    return (this._platform.ANDROID || this._platform.IOS) && this._platform.SAFARI;
+    return this._platform.IOS && this._platform.SAFARI;
   }
 }

tailwind.config.js

@@ -4,8 +4,8 @@ module.exports = {
   darkMode: 'media', // or 'media' or 'class'
   theme: {
     screens: {
-      tablet: '640px', // 744 x 1133 iPad Optimale Auflösung
-      desktop: '1024px', // 1440 x 1024 Desktop Optimale Auflösung
+      'desktop-small': '1024px',
+      desktop: '1440px',
     },
     zIndex: {
       dropdown: 50,