How To Run Javascript Based On Screen Resolution Using Jquery

Running a particular javascript based on screen resolution is mostly used in front end for making website responsive. For that we need to include jquery script to our HTML code.

Here is the CDN of Jquery.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

Here is the minified copy of Jquery from CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Example : 1

Please consider that we need to run a particular script below 768px screen resolution.  We need to add window inner width javascript to our code. If we want to run below particular resolution then we have to use less than symbol i.e (<)

<script>
if (window.innerWidth < 768) {
    //Add javascript code for screen resolution lower than 768px.
}
</script>

The above code will run the action if the screen resolution is below 768px.

Example : 2

If we need to run the code above a particular screen resolution then we need to add greater than symbol i.e (>)

<script>
if (window.innerWidth > 768) {
     //Add javascript code for screen resolution greater than 768px. 
}
</script>

Example : 3

If we want to run javascript code in between 960px and 768px screen resolution. Then we have to like below

<script>
if (window.innerWidth<960 && window.innerWidth > 768) {
  //Add javascript code for screen resolution between 768px and 960px 
}
</script>

It can be better explained when comparing with CSS. Here is the comparison with Jquery and CSS for resolution based style and script running.

If you need help with implementing the above codes you can contact me. If you have further questions please contact please leave comment below.