<h1>Determine viewport size</h1>

<p aria-live="polite" aria-atomic="true"><strong>Result:</strong> <span id="viewportSize">Not determined yet</span></p>
<p>Try to resize the browser window.</p>
body {
  font-family: "Inter", "SF Pro Text", "Helvetica Neue", "Helvetica", "Segoe UI", system-ui, "Arial", sans-serif;
}

@media only screen and (max-width: 36em) {
  :root body::before {
    content: "small";
    display: none;
  }
}

@media only screen and (min-width: 36.0625em) and (max-width: 48em) {
  :root body::before {
    content: "medium";
    display: none;
  }
}

@media only screen and (min-width: 48.0625em) {
  :root body::before {
    content: "large";
    display: none;
  }
}
function getViewportSize() {
  const styleContent = window
    .getComputedStyle(document.body, "::before")
    .getPropertyValue("content");

  if (styleContent === null) {
    return "unknown";
  }

  return styleContent.replace(/["']/g, "");
}

const determineViewportSize = () => {
  const viewportSizeElement = document.querySelector("#viewportSize");

  viewportSizeElement.textContent = getViewportSize();
};

window.addEventListener("load", determineViewportSize);

window.addEventListener("resize", determineViewportSize);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.