Run javascript only when accessing a mobile phone’s website

Question

I noticed that the bootstraps menu does not close after selecting an option when using a mobile phone, so I want to run only if I am on a mobile phone, I am doing this way, would be correct? Thanks

<script>

    jQuery(document).ready(function($){
        var deviceAgent = navigator.userAgent.toLowerCase();
        var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);

        if (agentID) {
             alert('você está utilizando um celular');

            $('.nav a').on('click', function(){
                //$('.btn-navbar').click(); //bootstrap 2.x
                $('.navbar-toggle').click() //bootstrap 3.x
            }); 

        } else {
           alert('você está em um computador');
      }
    });

</script>

Answer 1

NAY.

Your website will work today for a specific amount of mobile devices. It will probably meet 95% of cases. But it has two problems:

• Minor problem: will leave out a few devices. All right, not a lot of people even browsing using a Playstation Vita or a N95 (yes, Nokia has smartphones that are not Android), but still this is inelegant;

• Bigger problem: in a while new devices appear that have new identifications of user agent and your site won’t be ready for them. Worse, current browsers can change their identifiers in one update. Hence your website stops working overnight.

I will repeat here what I have already said in another more specific question:

DON’T USE USERAGENT

If you don’t want anything to work on mobile devices, detecting screen size is less inelegant than reading useragent. But if you really want to know if a script you will run is supported by target browser - which is much more accurate than just checking which browser is - use a library like Modernizr.

It may be that something bootstrap works on one Android model and doesn’t work on another. If all you do to determine whether or not this content serves is to check whether the user browses with Chrome for Android, you are doing it very wrong.

Seriously people, stop keying functionality through user agent browser because this is uglier than hitting your own mother.

Answer 2

Yes, this is a good way because it does not depend on the screen size, but I believe you can use directly in the condition without having to generate a variable.

<script>

    jQuery(document).ready(function($){
        var deviceAgent = navigator.userAgent.toLowerCase();

        if (deviceAgent.match(/(iphone|ipod|ipad|android)/)) {
             alert('você está utilizando um celular');

            $('.nav a').on('click', function(){
                //$('.btn-navbar').click(); //bootstrap 2.x
                $('.navbar-toggle').click() //bootstrap 3.x
            }); 

        } else {
           alert('você está em um computador');
      }
    });

</script>

Answer 3

I think you can do that too, if you want to use less code:

if(/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ) {

}