How to run the jquery code only in mobile devices?

Question

what do I need to change here to work the code only on mobile devices, and to be disabled on computers?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul id="primary-menu">
  <li class="menu-item-has-children">
    <a href="http://example.org">Click me</a>
  </li>
</ul>
</body>

$( document ).ready(function() {  
  $("ul#primary-menu > li.menu-item-has-children > a").one("click", function(e)     {
     e.preventDefault();
});
});

Have a look at https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device#3540295 — Nathan Hawks, Jan 07 '20 at 00:34
@EvikGhazarian Using screen size to detect mobile devices is a very bad and extremely unreliable approach. Many users resize their browsers all the time for all kinds of reasons. It's only acceptable for design (layout) purposes — icecub, Jan 07 '20 at 00:45

score 0 · Answer 1 · answered Jan 07 '20 at 02:12

You can try with navigator object to detect the device.

The Navigator object will return something like bellow, then use regex to detect the device.

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.87 Safari/537.36

Sample code.

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    $("ul#primary-menu > li.menu-item-has-children > a").one("click", function(e) {
        e.preventDefault();
    });
}

Hope this will help.

How to run the jquery code only in mobile devices?

1 Answers1