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

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);