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.

score 0 · Answer 1 · answered Jul 08 '23 at 18:50

0

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.
  }
});

answered Jul 08 '23 at 18:50

Wongjn

8,544
2
8
24

it works when I add the if and else conditions. but the window.scrollY < 3296 is not part of the conditions, which means the code is triggered as soon as the viewport changes, which is not supposed to be. instead, it should only be triggered when scrolled, another aspect is, I also want the same in desktop mode when the viewport function is not triggered. again, one of the reasons why is because of the varied scrolled increments for desktop and mobile. On desktop, it is 3296 while on mobile is 5750. hence the needs, again thanks for tip laterly – Kiki-ko Jul 08 '23 at 20:10

score 0 · Accepted Answer · answered Jul 09 '23 at 08:16

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");
    }
  })
  }

i manage to find a solution using the above code... thanks for tip — Kiki-ko, Jul 09 '23 at 08:17
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jul 10 '23 at 10:52

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

2 Answers2