Piet Ostendorp
f4eb700ab4
Introduces DeviceDetectionService and ZoomDetectionService to detect mobile devices and browser zoom level. Adds ZoomWarningComponent to display warnings for unsupported mobile devices and non-optimal browser zoom, and integrates it into the app layout. Updates routing to allow mobile access for the 'poc-model' route.
34 lines
875 B
TypeScript
34 lines
875 B
TypeScript
import { Injectable } from '@angular/core';
|
|
import { BehaviorSubject, fromEvent } from 'rxjs';
|
|
import { debounceTime } from 'rxjs/operators';
|
|
|
|
@Injectable({
|
|
providedIn: 'root'
|
|
})
|
|
export class ZoomDetectionService {
|
|
private zoomLevel$ = new BehaviorSubject<number>(this.getZoomLevel());
|
|
|
|
constructor() {
|
|
// Zoom-Änderungen überwachen
|
|
fromEvent(window, 'resize')
|
|
.pipe(debounceTime(200))
|
|
.subscribe(() => {
|
|
this.zoomLevel$.next(this.getZoomLevel());
|
|
});
|
|
}
|
|
|
|
getZoomLevel(): number {
|
|
const devicePixelRatio = window.devicePixelRatio || 1;
|
|
return devicePixelRatio;
|
|
}
|
|
|
|
getZoomLevel$() {
|
|
return this.zoomLevel$.asObservable();
|
|
}
|
|
|
|
isZoomOutOfRange(minZoom: number = 0.95, maxZoom: number = 1.05): boolean {
|
|
const currentZoom = this.getZoomLevel();
|
|
return currentZoom < minZoom || currentZoom > maxZoom;
|
|
}
|
|
}
|