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

Answer 2

The simplest approach would be to use a library (such as Enquire.js) that enables you to do media queries. This allows you to use media queries in JavaScript just as you would with CSS.

Of course, if all you want is to show a button when the width is below 33em and hide it when above, regardless of @media or any other query, simply test the screen width:

// convert window width from pixel to em, as em is relative to size of font
var widthEms = $(window).width() / parseFloat($('body').css('font-size'));

// test for em width
if (widthEms < 33) {
    $('#btnSelectAll').show();
} else {
    $('#btnSelectAll').hide();
}

_{(Credit for the pixels-to-em conversion: Is it possible to get the width of the window in em units using javascript?)}

Answer 3

jQuery can give you the available width of the viewport as $(window).innerWidth().

You'll also want to check for window resizing with $(window).resize( yourRedrawFunction )

Also watch out for the pixel/em conversion. width properties will be pixel sizes and you've asked for em. That is tough to calculate, so I'd recommend avoiding that complexity if you can.

working example:

function redrawButton(){
    var pxPerEm = 13, // <- have fun with this
        pxWidth = $(window).innerWidth(),
        emWidth = Math.round( pxWidth / pxPerEm );
    $('#btnSelectAll')[ width < emWidth ? 'hide' : 'show' ]();
    return true;
}
redrawButton();
$(window).resize( redrawButton );

Calculating the em size could be done by parsing the root font-size, but that css property would have to exist for it to work. You might want to fall back to something you know to be true for your site, such as 13px in my example.

var pxPerEm = /^(\d+)px$/.exec($(document.body).css('font-size')) ? Number(RegExp.$1) : 13;

Answer 4

try this:

if(screen.width > 1000)
{
 ...
}

Try with em not sure if it will work.

Answer 5

I'd suggest you to use then:

$(window).on('load', function () {
    var screenSize = { //you could wish to set this variable as global
        width: $(this).width(),
        height: $(this).height()
    };
});

If you are an 'aware' developper and set always for images width & height attribute and don't use some async script to re-render the DOM, better would be to use the DOM ready handler:

$(function(){...}); //use $(window) inside handler

So then, screen width could be accessed using: screenSize.width