add screen-info module; implement functions to retrieve and listen for screen size changes

Author: dev-aditya-lab

src/browser/index.ts

@@ -8,3 +8,4 @@ export * from "./prevent-close";
 export * from "./network";
 export * from "./vibration";
 export * from "./geolocation";
+export * from "./screen-info";

src/browser/screen-info/index.ts

@@ -0,0 +1,39 @@
+export interface ScreenInfo {
+  width: number;
+  height: number;
+  availWidth: number;
+  availHeight: number;
+  devicePixelRatio: number;
+  orientation: string;
+  isLandscape: boolean;
+}
+
+/**
+ * Get current screen and viewport info
+ */
+export function getScreenInfo(): ScreenInfo {
+  const orientation =
+    (screen.orientation || {}).type || "unknown";
+
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    availWidth: screen.availWidth,
+    availHeight: screen.availHeight,
+    devicePixelRatio: window.devicePixelRatio,
+    orientation: orientation,
+    isLandscape: window.innerWidth > window.innerHeight
+  };
+}
+
+/**
+ * Listen for screen size changes (resize/orientation change)
+ */
+export function onScreenResize(
+  callback: (info: ScreenInfo) => void
+): void {
+  const handler = () => callback(getScreenInfo());
+
+  window.addEventListener("resize", handler);
+  window.addEventListener("orientationchange", handler);
+}