Как блокировать выполнение скрипта при адаптивном дизайне?

Question

[Stas2020]

На странице html есть картинки. При нажатии на картинку выполняется скрипт, увеличивающий картинку.
Через css и media для страницы есть несколько вариантов. Как проще всего сделать так, чтобы на мобильной версии скрипт не выполнялся (т.е. картинка не увеличивалась)?

Answer 1

[Анита Ковалева]

Найти этот кусок кода с скриптом и выполнить условие

function windowSize(){
    if($(window).width() >'768'){
                 <code>код</code>
		// экран больше 768 px в ширину --- выполняем скрипт
       }
}
$(window).load(windowSize);
$(window).resize(windowSize);
$(window).on('load resize',windowSize);

Comments

[Евгений]

Тогда уж так

if (window.matchMedia("(max-width: 1200px)").matches) {
// тут код
}

Answer 2

[Александр Черемхин]

Определить на клиенте в каком состоянии находится media можно через объект Window.matchMedia().
Подробнее
https://developer.mozilla.org/ru/docs/Web/API/Wind...

Answer 3

[Alex]

На сервере, определить что это мобильная версия и не отдавать скрипты для картинок.

Или

На клиенте, определить что это мобильная версия и не запускать скрипт для картинок

Answer 4

[Евгений]

наложите на блок с картинкой прозрачный блок, который будет виден только на мобильной версии