JSFiddle - React, Tailwind, and code Playground

by Yu Jiangshui

CSS

/* default state */
.state-indicator {
    position: absolute;
    top: -999em;
    left: -999em;

    z-index: 1;
}

/* small desktop */
@media all and (max-width: 1200px) {
    .state-indicator {
        z-index: 2;
    }
}

/* tablet */
@media all and (max-width: 1024px) {
    .state-indicator {
        z-index: 3;
    }
}

/* mobile phone */
@media all and (max-width: 768px) {
    .state-indicator {
        z-index: 4;
    }
}

JavaScript

$(function(){
    $('body').append('<div class="state-indicator"></div>');
    
    function getDeviceState() {
        switch(parseInt($('.state-indicator').css('z-index'),10)) {
            case 2:
                return 'small-desktop';
                break;
            case 3:
                return 'tablet';
                break;
            case 4:
                return 'phone';
                break;
            default:
                return 'desktop';
                break;
        }
    }
    
    console.log(getDeviceState());
    $('.state-indicator').remove();
});