Screen.js

// https://webbrowsertools.com/screen-size

class Screen {
  constructor() {
    ratio: 8;
  }

  gcd(a, b) {
    return 0 === b ? a : this.gcd(b, a % b);
  }

  prefix() {
    if (window.matchMedia)
      for (
        var prefixes =
            "-webkit-min- min--moz- -o-min- -ms-min- -khtml-min- ".split(" "),
          i = 0;
        i < prefixes.length;
        i++
      )
        if (
          window.matchMedia("(" + prefixes[i] + "device-pixel-ratio:1.0)")
            .matches
        )
          return prefixes[i];
  }
  dppx() {
    if (window.matchMedia) {
      for (
        var i = 1, maxdppx = 1;
        i <= this.ratio &&
        !1 !==
          window.matchMedia("(min-resolution:" + i.toFixed(1) + "dppx)")
            .matches;
        i = parseFloat((i + 0.1).toFixed(1))
      )
        maxdppx = i;
      return maxdppx;
    }
  }
  devicePixelRatio() {
    if (this.prefix) {
      for (
        var i = 1, maxdpr = 1;
        i <= this.ratio &&
        !1 !==
          window.matchMedia(
            "(" + this.prefix + "device-pixel-ratio:" + i.toFixed(1) + ")"
          ).matches;
        i = parseFloat((i + 0.1).toFixed(1))
      )
        maxdpr = i;
      return maxdpr;
    }
  }

  load() {
    const ratio = this.gcd(window.screen.width, window.screen.height);
    return {
      windowScreen: window.screen,
      windowNavigator: window.navigator,
      width: window.screen.width,
      height: window.screen.height,
      availWidth: window.screen.availWidth,
      colorDepth: window.screen.colorDepth,
      pixelDepth: window.screen.pixelDepth,
      availHeight: window.screen.availHeight,
      availTop: window.screen.availTop,
      availLeft: window.screen.availLeft,
      devicePixelRatio: window.devicePixelRatio,
      aspectRatio:
        window.screen.width / ratio + ":" + window.screen.height / ratio,
      orientationType: window.screen.orientation.type,
      orientationType2: window.screen.orientation.type.split("-")[0],
      maxTouchPoints: window.navigator.maxTouchPoints,
      angle: window.screen.orientation.angle,
      resolution:
        Math.round(
          window.screen.width * parseFloat(window.devicePixelRatio.toFixed(1))
        ) +
        " ⨯ " +
        Math.round(
          window.screen.height * parseFloat(window.devicePixelRatio.toFixed(1))
        ),
      innerWidth: window.innerWidth,
      outerWidth: window.outerWidth,
      innerHeight: window.innerHeight,
      outerHeight: window.outerHeight,
      bodyClientWidth: document.body.clientWidth,
      bodyCientHeight: document.body.clientHeight,
      bodyClientTop: document.body.clientTop,
      bodyClientLeft: document.body.clientLeft,
      clientWidth: document.documentElement.clientWidth,
      clientHeight: document.documentElement.clientHeight,
      clientTop: document.documentElement.clientTop,
      clientLeft: document.documentElement.clientLeft,
      viewportWidth: Math.max(
        document.documentElement.clientWidth || 0,
        window.innerWidth || 0
      ),
      viewportHeight: Math.max(
        document.documentElement.clientHeight || 0,
        window.innerHeight || 0
      ),
      detectorPrefix: this.prefix(),
      detectorDPI: Math.round(96 * this.dppx()),
      detectorDPRDetected: this.devicePixelRatio(),
      detectorDppx: Math.round(parseFloat(this.dppx().toFixed(1))),
      zoomLevel: Math.round(
        100 * parseFloat(window.devicePixelRatio.toFixed(1))
      ),
      detectorDPRWindow: parseFloat(window.devicePixelRatio.toFixed(1)),
    };
  }
}

This JavaScript code defines a class called Screen that gathers various information about a user's device screen, including dimensions, resolution, pixel ratio, and other related properties. The class contains a constructor and several methods to obtain these properties. Here's a brief overview of each method:

1. constructor(): Initializes a Screen object with a ratio property set to 8.
2. gcd(a, b): Calculates the greatest common divisor (GCD) of two given numbers using the Euclidean algorithm.
3. prefix(): Detects and returns the prefix for device pixel ratio media queries supported by the browser.
4. dppx(): Determines the maximum device pixel ratio in dppx (dots per px) supported by the browser.
5. devicePixelRatio(): Determines the maximum device pixel ratio in the format supported by the browser.
6. load(): Gathers various properties related to the user's device screen and returns them as an object. Some of these properties include screen dimensions, orientation, color depth, pixel depth, viewport dimensions, and zoom level.

To use the Screen class, you can create a new instance of the class and call its load() method. This will return an object with the screen properties:

const screenInfo = new Screen();
const screenProperties = screenInfo.load();
console.log(screenProperties);

This will log an object containing the screen properties to the console.