Dudaevskiy
10/22/2019 - 11:53 AM

JavaScript - Как определить, больше ли ширина экрана или аналог @media запросов в CSS

.js
content_copyfile_download
// Как динамически определять ширину экрана в пикселях
window.addEventListener("resize", function() {
    if (window.matchMedia("(min-width: 500px)").matches) {
        console.log("Screen width is at least 500px");
    } else {
        console.log("Screen less than 500px");
    }
});


//jQuery вариант срипта для обработки ширины экрана
jQuery(document).ready(function($) {

  if ($(window).width() > 1000) {

    console.log('Ширина экрана больше 1000 пикселей');

  } else {

    console.log('Ширина экрана МЕНЬШЕ 1000 пикселей');

  }

});

// Пример отработки скрипта в зависимости от диапазона ширины экрана
// от 769px до 1024px
jQuery(document).ready(function($){
window.addEventListener("resize", function() {
    if (window.matchMedia("(min-width: 769px)").matches && window.matchMedia("(max-width: 1024px)").matches) {
        console.log("✅✅✅ Ширина экрана от 769px до 1024px");
    } else {
        console.log("🔴🔴🔴 Ширина экрана не в диапазоне");
    }
});
});