Device Service

## Source Code File: `src/utils/services/device.service.ts` ```typescript import { BreakpointObserver } from '@angular/cdk/layout'; import { Injectable, inject } from '@angular/core'; import { Observable, map } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class DeviceService { private readonly breakpointObserver = inject(BreakpointObserver); isHandset$: Observable = this.breakpointObserver .observe('(max-width: 640px)') .pipe(map(result => result.matches)); isTablet$: Observable = this.breakpointObserver .observe('(max-width: 960px)') .pipe(map(result => result.matches)); isLessThanMD$: Observable = this.breakpointObserver .observe('(max-width: 768px)') .pipe(map(result => result.matches)); canViewToc$ = this.breakpointObserver.observe('(max-width: 960px)').pipe( map(result => { return !result.matches; }) ); } ``` ## Description The `DeviceService` provides reactive observables for detecting device screen sizes and adjusting UI accordingly. ### Observables **isHandset$**: Emits `true` when viewport width is 640px or less (mobile devices) **isTablet$**: Emits `true` when viewport width is 960px or less (tablets and below) **isLessThanMD$**: Emits `true` when viewport width is 768px or less (below medium breakpoint) **canViewToc$**: Emits `true` when viewport width is greater than 960px (desktop - suitable for showing table of contents) ### Breakpoints The service uses standard Tailwind CSS-like breakpoints: - **640px**: Handset devices - **768px**: Medium breakpoint - **960px**: Tablet/desktop threshold All observables are reactive and automatically update when the viewport size changes, making them ideal for responsive UI adjustments.