How to detect browser viewport size change using JavaScript's matchMedia method?

Question

How can I detect a change in viewport?

The scripts:

let vwChange = window.matchMedia("(min-width: 360px ) and (max-width: 765px )");

document.addEventListener("scroll", function(vwChange) {
  const headerChangek = document.querySelector(".footer_bottom_content");
  if (window.scrollY < 3296) {
    headerChangek.classList.add("scrolledz");
  } else {
    headerChangek.classList.remove("scrolledz");
  }
})

.footer_bottom_content {
  position: fixed;
  top: 812px;
  margin-bottom: 0px;
  background-color: white;
  height: 65px;
  width: 100%;
}

.footer_bottom_content.scrolledz {
  background: linear-gradient(-225deg, hsla(0, 0%, 100%, 1) 25%, rgba(0, 36, 66, 0.979) 53%);
  opacity: 0.99;
  z-index: 1;
}

<div class="footer_bottom_content">
  <div class="footer_bottom_areas">
    <div class="footer_bottom_areasz">
      <img class="footer_logo" src="images/logo.jpg" alt="footer_logo">
    </div>
    <div class="footer-social-medias">
      <a href="#" class="fa-brands fa-youtube"></a>
      <a href="#" class="fa-brands fa-facebook"></a>
      <a href="#" class="fa-brands fa-twitter"></a>
      <a href="#" class="fa-brands fa-linkedin"></a>
    </div>
    <div class="footer_terms">
      <a href="#"> Terms of Use</a>
      <a href="#"> Privacy Policy</a>
      <a href="#"> Cookies </a>
    </div>
    <div class="footer_copyright">
      <i class="fa-solid fa-copyright"> 2023 </i>
    </div>
  </div>
</div>

Any tip will be appreciated, thanks.

What to increase the pixel from 3296 to 42++ when the viewport changes from desktop view to mobile view. It seems I am missing some aspect even it comes to the scripts that detect change in viewports.

Thank you.

Answer 1

function checkScreen(){


  const checkMobile = window.matchMedia('screen and (max-width: 575px)');
  const checkTablet = window.matchMedia('screen and (min-width: 576px) and (max-width: 991px)');
  const checkDesktop = window.matchMedia('screen and (min-width: 992px)');

  checkMobile.addListener(function(e){

    if(e.matches) {

        //console.log('MOBILE');
        //alert("Mobile")
        mobile ()
    }
  });

  checkTablet.addListener(function(e){

    if(e.matches) {

        //console.log('TABLET');
        //alert("Tabletty")

        tableTop ()

    }
  });

  checkDesktop.addListener(function(e){

    if(e.matches) {

        //console.log('DESKTOP');
        //alert("desktoppy")

        deskTop ()
    }
  });

  
  
}
checkScreen()




function deskTop () {

document.addEventListener("scroll", function(){
  const headerChangek = document.querySelector(".footer_bottom_content");
  if (window.scrollY < 3296) {
  headerChangek.classList.add("scrolledz");
  } 
  else {
  headerChangek.classList.remove("scrolledz");
  }
})
}





function tableTop () {

  document.addEventListener("scroll", function(){
    const headerChangek = document.querySelector(".footer_bottom_content");
    if (window.scrollY < 5540) {
    headerChangek.classList.add("scrolledz");
    } 
    else {
    headerChangek.classList.remove("scrolledz");
    }
  })
  }





function mobile () {

  document.addEventListener("scroll", function(){
    const headerChangekt = document.querySelector(".footer_bottom_content");
    if (window.scrollY < 5750) {
    headerChangekt.classList.add("scrolledz");
    } 
    else {
    headerChangekt.classList.remove("scrolledz");
    }
  })
  }

Answer 2

window.matchMedia() returns a MediaQueryList object. This object has an .addEventListener() method that you can call to register a function that should run when the status of the media query changes from matching to not matching or vice-versa:

let vwChange = window.matchMedia("(min-width: 360px ) and (max-width: 765px )");
vwChange.addEventListener('change', event => {
  if (event.matches) {
    // When the media query now matches when it did not before.
  } else {
    // When the media query no longer matches with it did before.
  }
});