I've noticed that window.matchMedia works differently than using '@media only screen and' in CSS. With '@media', when the screen is narrowed, the changes happen automatically. However, with window.matchMedia, the screen needs to be loaded or refreshed, especially on desktop browsers. Is there a way to make window.matchMedia work more seamlessly like @media CSS, where the adjustments happen automatically as the screen-width is increased or decreased without the need for a manual refresh?
You can see an example of this 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]);
}
});