[Feature] - auto scale browser based on "base resolution" and "current resolution"

[seiyria]

https://stackoverflow.com/a/9040712/926845

basically, track --desired-width and --desired-height, when the page loads get --current-width and --current-height and either zoom() or scale() to make it look ok. this should probably only apply if current width < desired width for smaller resolutions

[seiyria]

Some code:

:root {

  --desired-width: 1440;
  --desired-height: 1200;
  --current-width: 1440;
  --current-height: 1200;
}

body {
  transform: scaleX(calc(var(--current-width) / var(--desired-width))) scaleY(calc(var(--current-height) / var(--desired-height)));
}

  private watchResolutionChanges() {
    const checkSize = () => {
      const rootElement = document.documentElement;
      const { clientWidth, clientHeight } = document.body;

      const maxWidthNeeded = +getComputedStyle(rootElement).getPropertyValue('--desired-width');
      const maxHeightNeeded = +getComputedStyle(rootElement).getPropertyValue('--desired-height');

      rootElement.style.setProperty('--current-width', Math.min(maxWidthNeeded, clientWidth).toString());
      rootElement.style.setProperty('--current-height', Math.min(maxHeightNeeded, clientHeight).toString());
    };

    checkSize();

    window.addEventListener('resize', checkSize);
  }

This doesn't quite work, as the page itself :

This seems to apply whether you do it on body, or a child of body. Requires more work.