Làm sao sử dụng media query với javascript/jquery

[code]

Mình muốn là khi thay đổi kích thước trình duyệt thì 1 số cái như là những sự kiện hover sẽ đổi thành click. Dùng cái setInterval thì lại gây ra 1 số lỗi

linrium/RipStyles

Với lại mình bị cái lỗi ở ngay chỗ Display Options khi mà responsive. Bị lỗi tại dòng số 75 hàm displayresponsive

var displayresponsive = function() {
        if ($(window).width() < 560) {
            $('.small-without-meta').addClass('active');
            if ($('.large-with-meta').hasClass('active')) {
                $('.small-without-meta').removeClass('active');
                $('.dribbbles').addClass('large-meta-active');
            } else {
                $('.dribbbles').removeClass('large-meta-active');
            }
        } else {
            $('.large-with-meta').removeClass('active');
            $('.small-without-meta').removeClass('active');
            $('.small-with-meta').addClass('active');
        }
    };

[Vong_Hoang_Tuong (null)]

Thực ra bạn chỉ cần kiểm tra trình duyệt có hỗ trợ touch event hay không thôi. Trước mình cũng bị cái vụ hover này, to như iPad cũng bị chứ không phải tính theo kích thước màn hình.

// http://stackoverflow.com/a/13470899
var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

Nếu bạn định làm cái gì khác dựa theo kích thước màn hình thì dùng resize event, và nên kết hợp với debounce function.

// https://davidwalsh.name/javascript-debounce-function
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this,
            args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var displayresponsive = debounce(function() {

    if ($(window).width() < 560) {
        $('.small-without-meta').addClass('active');
        if ($('.large-with-meta').hasClass('active')) {
            $('.small-without-meta').removeClass('active');
            $('.dribbbles').addClass('large-meta-active');
        } else {
            $('.dribbbles').removeClass('large-meta-active');
        }
    } else {
        $('.large-with-meta').removeClass('active');
        $('.small-without-meta').removeClass('active');
        $('.small-with-meta').addClass('active');
    }

}, 250);

$(window).on('resize', displayresponsive);