What is the equivalent of @media test for screen size in JQuery

Question

I'm currently using @media to set some CSS styles, but now I need the equivalent check for screen size in JQuery.

@media ( min-width: 33em ) {

}

The idea is to hide a button when the screen size is greater than 33em, and to show it when the is less then 33em.

Here is the button:

<asp:Button runat="server" ID="btnSelectAll" CssClass="btnSelectAll" data-theme="b"
                Text="Select All" OnClick="btnSelectAll_Click" />

Answer 1

Working jsFiddle example: http://jsfiddle.net/A5Hk5/2/

Everything you want to do is check screen width on window resize event, if width is lower then some value (in case off my example it is 640px) then set its display to none, else it is block or visible.

This solution uses em to px conversion, methods can be found below. Conversion functions taken from HERE.

$(document).on('pagebeforeshow', '[data-role="page"]', function(){ 
    $(window).resize();
});

$(window).resize(function() {
    $(".ui-btn").css({display: window.innerWidth >= $(33).toPx() ? "block" : "none"});
});

$.fn.toEm = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseInt(this[0],10),
        scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    return (that / scopeVal).toFixed(8);
};


$.fn.toPx = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseFloat(this[0]),
        scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    return Math.round(that * scopeVal);
};