How to disable a script when on mobile device

Question

I have a site which has a parallax scroll effect and it's running the skrollr.js script. It's a mobile first website, but I would like for the script to not run on mobile devices because it won't allow scrolling. Does anyone know how I can prevent the script from running when on a mobile device? Thanks.

The code where the script is uploaded is at then end of the body section. If any other code is needed let me know.

<!-- SCRIPTS -->

<script type="text/javascript" src="js/skrollr.js"></script>
<script type="text/javascript">
    skrollr.init();
</script>

<!--/ SCRIPTS -->

all solutions here are talking as if mobile devices === small browser window. perhaps we should ask if he really means no mobile devices or just no small screens, and if its no mobile, does mobile include tablet. — PlantTheIdea
– PlantTheIdea, Commented Dec 18, 2014 at 19:42
@MelanciaUK - i was trying to be more constructive than that, but indeed. :) — PlantTheIdea
– PlantTheIdea, Commented Dec 18, 2014 at 19:43
"let javascript check if its on a mobile" ... man there is so much wrong with that — PlantTheIdea
– PlantTheIdea, Commented Dec 18, 2014 at 19:44

baao · Accepted Answer · 2014-12-18 20:25:02Z

8

You can use modernizr's touch detection in order to check if it's a touch device, and, if yes, don't init the script.

if (Modernizr.touch) {

}
else 
{
    skrollr.init();
}

or you can check for the user agent (this might not be your best option as user agent isn't always reliable), and write a simple if else, with the skrollr init in the else

  var isMobile = {
            Android: function () {
                return navigator.userAgent.match(/Android/i);
            },
            BlackBerry: function () {
                return navigator.userAgent.match(/BlackBerry/i);
            },
            iOS: function () {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i);
            },
            Opera: function () {
                return navigator.userAgent.match(/Opera Mini/i);
            },
            Windows: function () {
                return navigator.userAgent.match(/IEMobile/i);
            },
            any: function () {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
            }
        };

        if (isMobile.any()) {

        }
        else {

             skrollr.init(); 
        }

Another way of testing would be by checking window.innerWidth and only init your script if the screen size is larger than 760px:

if (window.innerWidth > 760) {
skrollr.init();
}

edited Dec 18, 2014 at 20:25

answered Dec 18, 2014 at 19:39

baao

73.6k18 gold badges152 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Blazemonger Over a year ago

Don't assume "touch device" equals "small screen".

baao Over a year ago

@Blazemonger true, that won't have the desired effect on this devices. Is there a better solution you can think of?

Blazemonger Over a year ago

"Mobile device" to me means "small screen", as in less than about 760px wide. Test window.innerWidth instead.

RAVI singh · Accepted Answer · 2018-11-26 17:11:54Z

0

Assume if you are writing a function name exampleNotForMobileDevicese() if the window width is less than 768 then the next code wont excute beacuse we have use return i.e if the condition satisfies then the execution will stop

function exampleNotForMobileDevicese(){
  if(window.innerwidth < 768){
      return
    }
   your business logics.......

}

answered Nov 26, 2018 at 17:11

RAVI singh

1186 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to disable a script when on mobile device

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related