Disable .js file for specific media query?

Question

I want to disable my .js file when a browser window is less than 1000px but I also want to disable it for specific devices / media queries.

So for example, I want to make sure it doesn't load on iPad.

I have got the 1000px part sorted but I am not sure how to also implement the media query?

<script>
$(function() {
var windowWidth = $(window).width();
if(windowWidth > 1000){
    skrollr.init({
        forceHeight: false
    });
}});
</script>

It is AFAIK not possible. Use http://mobiledetect.net ( my choice ) if you can use PHP! — loveNoHate, Sep 15 '14 at 12:09
This should help with your problem: http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery — bencripps, Sep 15 '14 at 12:09
Oh, I got the question the other way around. JS in media-query. Look here: http://davidwalsh.name/add-rules-stylesheets. — loveNoHate, Sep 15 '14 at 12:12

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

You need to detect the userAgent, as seen here : What is the best way to detect a mobile device in jQuery?

In your code :

<script>
        $(function() {
             var windowWidth = $(window).width();
          if(windowWidth > 1000 && !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))){
           skrollr.init({
           forceHeight: false
          });
          }});
    </script>

edited May 23 '17 at 10:33

Community

1
1

answered Sep 15 '14 at 12:11

ovi

526
3
17

Thanks - This is exactly what I was trying to find! – Alistair Sep 15 '14 at 12:20

Disable .js file for specific media query?

1 Answers1