Как убрать из html блок при определённом размере экрана?

#javascript #html #css

Есть блок с большими картинками, которые на мобильном вообще не нужны.
Если скрывать через @media .nomob{display:none}, то картинки всё равно жрут трафик.

Я так понимаю, что тут поможет JS-скрипт со сравнением размера экрана:

      function screen_check(){
            if ($(window).width() <= 992) { 
               $('.nomob').?????????;
            } ;
        }
screen_check();
$(window).on('resize', function(){
    screen_check();
});


Пожалуйста, без jQuery.
    

Ответы

Ответ 1

Лучше определять устройство на сервере по User-Agent: в Headers. 
И в зависимости от устройства посылать мобильную или десктопную версию. Тогда не
потребуется грузить front-end лишними скриптами.


Ответ 2

Поведение тут будет зависеть от браузера, в большестве браузеров изображения скрытые
display: none предварительно загружаются, так же как и с указанием media query (как
в  CSS-файле, так и в