fixedlayout.js

(function(){
  const w = 1920, h = 1080;

  // Function to make elements non-responsive
  function makeNonResponsive(element) {
    const style = window.getComputedStyle(element);
    const width = style.getPropertyValue('width');
    const height = style.getPropertyValue('height');
    const position = style.getPropertyValue('position');
    
    element.style.setProperty('width', width, 'important');
    element.style.setProperty('height', height, 'important');
    element.style.setProperty('max-width', 'none', 'important');
    element.style.setProperty('max-height', 'none', 'important');
    element.style.setProperty('min-width', '0', 'important');
    element.style.setProperty('min-height', '0', 'important');
    
    if (position === 'static') {
      element.style.setProperty('position', 'relative', 'important');
    }
    
    element.style.setProperty('flex', 'none', 'important');
    element.style.setProperty('grid', 'none', 'important');
  }

  // Apply non-responsive styles to all elements
  function applyNonResponsiveStyles() {
    const allElements = document.getElementsByTagName('*');
    for (let element of allElements) {
      makeNonResponsive(element);
    }
  }

  // Override viewport meta tag
  let viewport = document.querySelector('meta[name="viewport"]');
  if (!viewport) {
    viewport = document.createElement('meta');
    viewport.name = 'viewport';
    document.head.appendChild(viewport);
  }
  viewport.content = `width=${w}, height=${h}, initial-scale=1, maximum-scale=1, user-scalable=no`;

  // Add custom styles
  const style = document.createElement('style');
  style.textContent = `
    html, body {
      width: ${w}px !important;
      height: ${h}px !important;
      overflow: auto !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    body {
      transform-origin: top left;
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
    }
  `;
  document.head.appendChild(style);

  // Scaling function
  function scaleContent() {
    const scaleX = window.innerWidth / w;
    const scaleY = window.innerHeight / h;
    const scale = Math.min(scaleX, scaleY);
    document.body.style.transform = `scale(${scale})`;
  }

  // Apply non-responsive styles and initial scaling
  applyNonResponsiveStyles();
  scaleContent();

  // Re-apply on any DOM changes
  const observer = new MutationObserver(() => {
    applyNonResponsiveStyles();
    scaleContent();
  });
  observer.observe(document.body, { childList: true, subtree: true });

  // Handle window resizing
  window.addEventListener('resize', scaleContent);
})();