Determining viewport size – small, medium and large – using CSS

The browser viewport is the screen that actually shows the webpage. Determining its size might be handy when we want to provide some specific features for the viewport size. Here we want to utilize CSS media query and a little JavaScript to get the viewport size.

Note that quite often there is a way of designing the user interface and thinking about a specific device, like a mobile, tablet, or regular computer. This is a bit trap because designing the user interface should be in relation to the viewport size, not the device.

Let’s then take a look at the code.

CSS code

@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;
  }
}

The first block represents a small viewport. The second block represents the medium viewport. The third block represents a large viewport.

How do I get the value of the viewport size?

JavaScript to the rescue. Let’s get the value that represents the viewport size.

function getViewportSize() {
  const styleContent = window
    .getComputedStyle(document.body, "content")
    .getPropertyValue("::before");

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

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

The workable example

See the workable example that determines the viewport size using CSS with a little JavaScript that helps to get the value.