HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>matchMedia() — min-width</title>
</head>
<body>
  <button type="button" id="checkBtn">Check viewport</button>
  <pre id="out"></pre>
  <script>
    function update() {
      var mq = window.matchMedia("(min-width: 600px)");
      document.getElementById("out").textContent = mq.matches
        ? "Viewport width is at least 600 pixels."
        : "Viewport width is less than 600 pixels.";
    }
    document.getElementById("checkBtn").onclick = update;
    window.matchMedia("(min-width: 600px)").addEventListener("change", update);
    update();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript matchMedia() — min-width check (Try It)