window.matchMedia работает только при обновлении окна

Question

window.matchMedia работает, но я подумал, что это будет работать так же, как использование "@media only screen" и работает там, где при сужении экрана это происходит. С помощью window.matchMedia экран должен быть загружен или обновлен, например, если вы работаете в настольном браузере. Есть ли способ заставить window.matchMedia работать как @media CSS, где это происходит автоматически, когда вы увеличиваете или уменьшаете ширину экрана без необходимости обновления или (повторной) загрузки экрана?

Пример ниже используется на: http://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

Нашел это, исследуя мои вопросы в поисковой системе и применив его: медиа-запрос не только во время выполнения, но и когда происходят какие-либо изменения в состоянии окна

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]);

     }
}

});