How to update window.matchMedia if window size changes?

Question

This function only works when the page gets reloaded:

if (window.matchMedia("(max-width: 700px)").matches) {
  $("html").css("background-color", "yellow");
} else {
  $("html").css("background-color", "red");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

But how can I additionally update it if the window size changes?

This article didn't help me so far. It's hard for me to find the best solution.

Does this answer your question? [JavaScript window resize event](https://stackoverflow.com/questions/641857/javascript-window-resize-event) — 0stone0, Mar 21 '21 at 19:24
@0stone0 If I take the accepted solution, then it only works on resize, but not if the page gets loaded. I can try to find another way. But it would be nice to know what's the best and most efficient way. — Anna_B, Mar 21 '21 at 19:26
Note this can be done using css media queries alone with no script — charlietfl, Mar 21 '21 at 19:31

score 0 · Answer 1 · answered Mar 21 '21 at 19:27

You could set up the event handler using the addEventListener() method:

Window.addEventListener('resize', reportWindowSize);

function reportWindowSize() {
  var height = window.innerHeight;
  var width = window.innerWidth;
}

or

window.onresize = reportWindowSize;

score 0 · Accepted Answer · answered Mar 21 '21 at 19:30

0

Using jQuery just put it in a resize event handler and trigger the event also when page loads

$(window).resize(function(){    
    if (window.matchMedia("(max-width: 700px)").matches) {
      $("html").css("background-color", "yellow");
    } else {
      $("html").css("background-color", "red");
    }
}).resize()// trigger on page load

answered Mar 21 '21 at 19:30

charlietfl

164,229
13
110
143

Ingenious!! <3<3<3 – Anna_B Mar 21 '21 at 19:32

score 0 · Answer 3 · answered Mar 21 '21 at 19:31

function myFunction() {
  if (window.matchMedia("(max-width: 700px)").matches) {
    $("html").css("background-color", "yellow");
  } else {
    $("html").css("background-color", "red");
  }
};

// Resize event
window.addEventListener("resize", myFunction);

// First load
window.addEventListener("load", myFunction);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to update window.matchMedia if window size changes?

3 Answers3