Jquery and media query without page resize

Hi all

I have a jsfiddle here - http://jsfiddle.net/gw4dx575/

$(document).ready(function () {
    $(window).resize(function(){    
        if ($(".responsive-screen").css("content") === "M" ){
            console.log('mobile');
        }else{
            console.log('desktop');
        }
    });
})

I need a simple method to have different jquery events on different devices/screen sizes (hover on desktop and click on mobile).

I’m using the method described here - http://www.fourfront.us/blog/jquery-window-width-and-media-queries

It works by checking if a media query is set when the page is resized.

My problem is I need it to work when the page isn’t resized like when the page loads on a mobiel device.

This point is made and the response is to check outside the window.resize function.

How do I check outside the window.resize function.

You just need to add code outside of your resize() function:

$(document).ready(function () {
    // put your code here for non-resize stuff
    $(window).resize(function(){    
        if ($(".responsive-screen").css("content") === "M" ){
            console.log('mobile');
        }else{
            console.log('desktop');
        }
    });
});

Notice the comment I added inside the code, near the top. Also, you’re missing the semi-colon at the end of your code block.