CODEWITHSUNDEEP
jquery
JulianJ
JulianJ

Reputation: 1317

Applying jquery code only to mobile device

I'm using fullcalendar on a site and want to style events slightly differently on smaller screen sizes. How can I trigger the code below if a window is below a certain size?

eventAfterRender: function(event, element, view) {
    $(element).css('height','10px');
}

Upvotes: 2

Views: 6360

Answers (2)

Bambou
Bambou

Reputation: 1077

For smaller screen in jquery you can define the size of window with

$(window).width()

And make an if condition

var windowWidth = $(window).width();
if(windowWidth<768){//Your script if device width is under 768px}

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You can use $(window).width() as

    var width = $(window).width();
    if (width <= 480) {
      //code for mobile devices
    } else {
      //code for other devices
    }

$(window).width() gives you the width of the device in pixel and you can use that value to determine the mobile, tablet or desktop devices accordingly and add your device specific code accordingly.

Upvotes: 7

Related Questions