Разные действия по нажатию на кнопку при разном разрешении экрана. Возможно?

Question

[bpGusar]

Например если разрешение меньше 768px то нажатие на кнопку сделает это, если разрешение больше чем 768px то будет уже другое действие по нажатию на эту кнопку.
Такое возможно реализовать?

Answer 1

[bpGusar]

В общем то все были правы но немного не так скрипт написали, я его немного переделал.

Вот правильное решение которое мне подошло:

$(document).ready(function () {
    if (window.matchMedia('(max-width: 768px)').matches) {
        // здесь одно действие
    } else if (window.matchMedia('(min-width: 768px)').matches) {
        // здесь другое
    }
});

И проблема еще в том что это срабатывает только при перезагрузке страницы, ибо когда ты просто сменил разрешение скрипт не отрабатывает как надо. Возможно это лечится играми с resize но мне лень проверять да и работу я сделал.

Answer 2

[Stimulate]

if(window.matchMedia('(max-width: 768px)').matches)
{
}

Answer 3

[Григорий]

Первое что в голову пришло проверять размер экрана, внутри события
document.body.clientWidth < 768

Answer 4

[Александр]

var mql = window.matchMedia('all and (max-width: 768px)');
if (mql.matches) {
    // размер окна 768px или меньше
} else {
    // нет, размер окна более 768px 
}