Execute javascript only when accessing a mobile site

1

I've noticed that the bootstraps menu does not close after selecting an option when using a mobile phone, so I want to run only if it's on a mobile phone, I'm doing this, would it be the correct one? Thank you

<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>
    
asked by anonymous 25.04.2017 / 18:29

3 answers

5

NO.

Your site will work today for a specific amount of mobile devices. It will probably cover 95% of the cases. But there are two problems:

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

  • More problem: new devices emerge that have new user agent IDs and your site is not ready for them. Worse, today's browsers can change their identifiers in an update. Hence your site stops working overnight.

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

DO NOT USE USERAGENT

If you do not 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're going to run is supported by the target browser -  which is much more accurate than just checking the browser - use some library like Modernizr.

It may be that something from the bootstrap runs on one Android model and does not work on another. If all you do to determine whether or not this content serves is to check if the user browses with Chrome for Android, you're doing it very wrong.

Seriously, stop switching functionality to the browser's user agent because this is uglier than hitting on your own mother.

    
25.04.2017 / 18:58
-1

Yes, this is a good way because it does not depend on screen size, but I believe you can use it directly 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>
    
25.04.2017 / 18:32
-1

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

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

}
    
25.04.2017 / 18:37