How to detect the device is an Android device using JavaScript ?

0 0 2 minutes read

The task is to detect a device, whether the device is Android Phone or not using JavaScript.

Approach 1:

Use navigator.userAgent property to get the value of the user-agent header sent by the browser to the server.
Check the index of ‘android’ in the userAgent.
If the index is greater then -1 then it is android phone else not android phone.

Example: This example checks whether the device is android phone or not.

<!DOCTYPE HTML>  
<html>  
  
<head>  
    <title>  
        How to detect Android Phone 
        using JavaScript ? 
    </title> 
</head>  
  
<body style = "text-align:center;">  
  
    <h1 style = "color:green;" >  
        GeeksForGeeks 
    </h1> 
  
    <p id = "GFG_UP" style = 
        "font-size: 19px; font-weight: bold;"> 
    </p> 
      
    <button onclick = "GFG_Fun()"> 
        click here 
    </button> 
      
    <p id = "GFG_DOWN" style = 
        "color: green; font-size: 24px; font-weight: bold;"> 
    </p> 
      
    <script> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        el_up.innerHTML = "Click on the button to detect if" 
                    + " the device is android phone."; 
          
        function GFG_Fun() { 
            var res = "Device is not Android Phone"; 
            var userAgent = navigator.userAgent.toLowerCase(); 
            var Android = userAgent.indexOf("android") > -1; 
              
            if(Android) { 
                res = "Device is Android Phone"; 
            } 
            el_down.innerHTML = res; 
        } 
    </script>  
</body>  
  
</html> 

Output:

Before Clicking the Button:
Run on Computer and Click the Button:
Run on Android Mobile and Click the Button:

Approach 2:

Get the navigator.userAgent Property in a variable name userAgent.
Check for the ‘android’ in the userAgent by using RegExp
If the value of Android is not 0 then it is android phone else not android phone.

Example:

<!DOCTYPE HTML>  
<html>  
  
<head>  
    <title>  
        How to detect Android Phone 
        using JavaScript ? 
    </title> 
</head>  
  
<body style = "text-align:center;">  
      
    <h1 style = "color:green;" >  
        GeeksForGeeks 
    </h1> 
      
    <p id = "GFG_UP" style = 
        "font-size: 19px; font-weight: bold;"> 
    </p> 
      
    <button onclick = "GFG_Fun()"> 
        click here 
    </button> 
      
    <p id = "GFG_DOWN" style = 
        "color: green; font-size: 24px; font-weight: bold;"> 
    </p> 
      
    <script> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        el_up.innerHTML = "Click on the button to detect if" 
                + " the device is android phone."; 
          
        function GFG_Fun() { 
            var res = "Device is not Android Phone"; 
            var Android = /(android)/i.test(navigator.userAgent); 
              
            if(Android) { 
                res = "Device is Android Phone"; 
            } 
              
            el_down.innerHTML = res; 
        } 
    </script>  
</body>  
  
</html> 