window.matchMedia only working on window refresh

Question

window.matchMedia is working, but I thought it would work like using '@media only screen and' works where when the screen is narrowed it happens. With window.matchMedia the screen has to be loaded or refreshed if you're on a desktop browser for example. Is there a way to have window.matchMedia working like @media CSS where it just happens automatically when you increase or decrease the screen-width without the need for the screen to be refreshed or (re)loaded?

Example below being used on: Americastributetoparis.com

jQuery(document).ready(function($) {

if (window.matchMedia("(max-width: 800px)").matches) {
    // phone
    $(".front-page-1").backstretch(["/wp-content/themes/digital-pro/images/americas-tribute-to-paris-mobile.png"]);

} else {

    //tab or desktop
    $(".front-page-1").backstretch([BackStretchImg.src]);

}

});

Answer 1

Found this researching my questions on a search engine and applied it: media query not just on run time, but also when any changes to the window state occur

jQuery(document).ready(function($) {

var mql = window.matchMedia("(max-width: 800px)")

mediaqueryresponse(mql) // call listener function explicitly at run time

mql.addListener(mediaqueryresponse) // attach listener function to listen in on state changes

function mediaqueryresponse(mql){
     if (mql.matches){ // if media query matches

      // phone
        $(".front-page-1").backstretch(["/wp-content/themes/digital-pro/images/americas-tribute-to-paris-mobile.png"]);

    } else {

      //tab or desktop
        $(".front-page-1").backstretch([BackStretchImg.src]);

     }
}

});