jQuery Screen Width Condition

jQuery-Media-Queries

In this jQuery tutorial we will learn how to set conditions in jQuery to do something when screen width size is less than or more than xx px.

We may need to execute some jQuery codes only for mobile devices or only for big screen devices (laptop / desktop). This is required when we are developing a responsive layout.

Setting screen width condition is very simple in jQuery. Doing media queries in jQuery is as simple as we do in CSS. Use below code if we want to do something when screen width is less than 768px.

1
2
3
4
5
6
if ($(window).width() < 768 ) {
 // do something for small screen devices
}
else {
 // do something for large screen devices
}

We can modify above code to work with screen resize event.

1
2
3
4
5
6
7
8
$(window).resize(function() {
 if ($(window).width() < 768) {
   // do something for small screen devices
 }
 else {
  // do something for large screen devices
}
});

Hope this tutorial was helpful to you.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *