How to detect the device is an Android device using JavaScript ?
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> |
Output:
- Before Clicking the Button:
- Run on Computer and Click the Button:
- Run on Android Mobile and Click the Button:
Please Login to comment...