window.matchMedia sadece pencere yenilemede çalışan

Question

window.matchMedia çalışıyor, ancak ekranın daraltıldığı zaman, '@ media only screen' ve 'works' gibi çalışmaların işe yarayacağını düşündüm. Window.matchMedia ile, örneğin bir masaüstü tarayıcısındaysanız, ekranın yüklenmesi veya yenilenmesi gerekir. Window.matchMedia ekranının yenilenmesi veya (yeniden) yüklenmesi gerekmeden ekran genişliğini artırdığınızda veya azalttığınızda otomatik olarak gerçekleştiği @media CSS gibi çalışmanın bir yolu var mı?

Örnek altında

kullanılıyor: 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

Bulunan bu bir arama motoru üzerinde sorularımı araştırma ve uyguladı: 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]); 

    } 
} 

});