51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { MediaMatcher } from '@angular/cdk/layout';
|
|
import { Injectable } from '@angular/core';
|
|
|
|
@Injectable({
|
|
providedIn: 'root'
|
|
})
|
|
export class DeviceService {
|
|
|
|
private TABLET_WIDTH = 1000;
|
|
private DESKTOP_WIDTH = 1400;
|
|
|
|
public orientation?: "landscape" | "portraid";
|
|
public flipPhone: boolean = false;
|
|
public width?: number;
|
|
|
|
constructor(
|
|
private mediaMacher: MediaMatcher
|
|
) {
|
|
this.checkScreen();
|
|
window.addEventListener("resize", () => {
|
|
this.checkScreen();
|
|
});
|
|
}
|
|
checkScreen() {
|
|
const isPortrait = window.outerWidth < window.outerHeight;
|
|
if (
|
|
isPortrait &&
|
|
window.outerWidth <this.TABLET_WIDTH
|
|
) {
|
|
this.flipPhone = true;
|
|
} else {
|
|
this.flipPhone = false;
|
|
}
|
|
this.orientation = isPortrait ? "portraid" : "landscape";
|
|
this.width = window.outerWidth;
|
|
}
|
|
isMobile(): boolean {
|
|
return window.outerWidth < this.TABLET_WIDTH;
|
|
}
|
|
isTablet(): boolean {
|
|
return window.outerWidth > this.TABLET_WIDTH && window.outerWidth < this.DESKTOP_WIDTH;
|
|
}
|
|
isDesktop(): boolean {
|
|
return window.outerWidth > this.DESKTOP_WIDTH;
|
|
}
|
|
toString() {
|
|
return `Orientation: ${this.orientation}, Width: ${this.width}, Flip: ${this.flipPhone}, IsMobile: ${this.isMobile()}
|
|
IsTablet: ${this.isTablet()}, IsDesktop: ${this.isDesktop()}`;
|
|
}
|
|
}
|