https://modern-glass-widget-theme-x-evolution.pages.dev/Preview/ScreenSizeAutoAdjuster.js

1// final version desktop only
2(function () {
3  const IDEAL_WIDTH = 1366;
4
5  function getZoomRatio(currentWidth) {
6    return currentWidth / IDEAL_WIDTH;
7  }
8
9  function applyStrictRatioZoom() {
10    const zoom = getZoomRatio(window.innerWidth);
11    document.body.style.zoom = zoom;
12  }
13
14  window.addEventListener("DOMContentLoaded", applyStrictRatioZoom);
15  window.addEventListener("resize", applyStrictRatioZoom);
16})();
17
18
19//  This version can set zoom levels as well with a min zoom and max zoom kinda adjusts for mobile and ultra wide screens
20// (function () {
21//   const IDEAL_WIDTH = 1366;
22//   const MIN_ZOOM = 0.5;
23//   const MAX_ZOOM = 1.5; // Adjust as needed for ultra-wide screens
24
25//   function getZoomRatio(width) {
26//     const ratio = width / IDEAL_WIDTH;
27//     return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, ratio));
28//   }
29
30//   function applyCSSZoom() {
31//     const zoom = getZoomRatio(window.innerWidth);
32//     document.body.style.zoom = zoom;
33//     // console.log(`✅ CSS zoom applied: ${zoom}`);
34//   }
35
36//   window.addEventListener("DOMContentLoaded", applyCSSZoom);
37//   window.addEventListener("resize", applyCSSZoom);
38// })();
39
40// This version is basically the same 
41// (function () {
42//   const IDEAL_WIDTH = 1366;
43//   const MIN_ZOOM = 0.5;
44//   const MAX_ZOOM = 1;
45
46//   function getZoomRatio(width) {
47//     if (width >= IDEAL_WIDTH) return 1;
48//     return Math.max(MIN_ZOOM, width / IDEAL_WIDTH);
49//   }
50
51//   function applyCSSZoom() {
52//     const zoom = getZoomRatio(window.innerWidth);
53//     document.body.style.zoom = zoom;
54//   }
55
56//   window.addEventListener("DOMContentLoaded", applyCSSZoom);
57//   window.addEventListener("resize", applyCSSZoom);
58// })();