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.
30 lines
748 B
TypeScript
30 lines
748 B
TypeScript
import { Injectable } from '@angular/core';
|
|
|
|
@Injectable({
|
|
providedIn: 'root'
|
|
})
|
|
export class DeviceDetectionService {
|
|
private _isMobile: boolean;
|
|
|
|
constructor() {
|
|
this._isMobile = this.checkIfMobile();
|
|
}
|
|
|
|
isMobile(): boolean {
|
|
return this._isMobile;
|
|
}
|
|
|
|
private checkIfMobile(): boolean {
|
|
const userAgent = navigator.userAgent.toLowerCase();
|
|
const isMobileUA = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
|
|
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
|
const isSmallScreen = window.innerWidth < 768;
|
|
|
|
return isMobileUA || (isTouchDevice && isSmallScreen);
|
|
}
|
|
|
|
recheckDevice(): void {
|
|
this._isMobile = this.checkIfMobile();
|
|
}
|
|
}
|