Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Detect Mobile Device with JavaScript
In this tutorial, we are going to learn how can we detect a mobile device over which we are working using JavaScript.
Approach 1: Using the navigator.userAgent Property
To detect a mobile device with JavaScript we are going to use the window navigator object which contains all the information regarding a browser. The property which we will use to detect a mobile device will be the userAgent property which is used to return the user-agent header sent to the server by the browser. The value we receive from this property is the browser name, version, and platform i.e., all the information regarding a mobile device you will get using this function.
Syntax
Syntax to detect a mobile device with JavaScript is given as ?
window.navigator.userAgent ; or navigator.userAgent ;
Steps
Steps to detect a mobile device using JavaScript are given below ?
Create a button and link it with a function named as myfunction.
Now in the function we will create one if loop.
Inside the if loop we will write some conditions using navigator.userAgent property to detect any mobile device.
The conditions we write will find match for each type of mobile devices such as android, webOS, iPad, iPhone, iPod, BlackBerry, and windows Phone.
After checking all the conditions, it will return true if any mobile device found.
If any mobile device is not found than we get false in the 'a' variable using else loop.
At last print the value of a in the answer variable which is linked with the paragraph tag with id result to print the value either true or false on the screen
Example
We can use the below HTML code to detect mobile device with JavaScript ?
<!DOCTYPE html>
<html>
<head>
</head>
<body style="text-align:center;">
<button id="browse" onclick="myfunction()"> Check</button>
<p id="result">
</p>
<script>
var a;
var answer = document.getElementById("result"); function myfunction() {
if (navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
a = true ;
} else {
a = false ;
}
answer.innerHTML = a;
}
</script>
</body>
</html>
Note ? To get the output from the above code as ?true' you need to run your code using the chrome developer tool by choosing the option of mobile phones. When you enter the mobile zone of the developer tool there you can choose any mobile phone to work as an emulator from the list of mobile devices present there to detect the presence of mobile phones using the above code.
On running the code, a button will appear on the window named Check by clicking you can detect the mobile phone. If the code is running on any mobile device, then the output will be true otherwise it will be false.
Approach 2
But this method of user-agent is not the best method to detect a mobile device with JavaScript because the user-agent strings can be spoofed very easily. So, we can also use the window.orientation method to detect a mobile device using JavaScript, this method checks for the orientation of the viewport of the device. It provides us certain values in degrees like - 90, 0,90,180 all these values signify different viewports. If the value of the viewport is greater than 0 it means that the device is a mobile otherwise it's not a mobile phone.
Note ? This feature is deprecated and no longer recommended
Steps to detect a mobile device using JavaScript are given below ?
Create a button and link it with a function named ?myfunction'.
Now inside the script tag, we will define the function.
Create a variable named as answer and inside it we will use the window.orientation method to check if the orientation value is greater than -1 or not.
In the next line, we will call the alert method which will print the value as "It is a mobile phone" if the value of the answer variable is true.
Otherwise, the value will be shown as "It is not a mobile phone".
Example
We can use the below HTML code to detect mobile device with JavaScript ?
<!DOCTYPE html>
<html>
<head>
</head>
<body style="text align:center;">
<button id="browse" onclick="myfunction()">Check</button>
<script>
function myfunction() {
var answer = window.orientation > 1;
alert(answer ? 'It is a mobile device' : 'It is not a mobile device');
}
</script>
</body>
</html>
Note ? To check the output of this code we need to use the chrome developer tool as used in the above code.
If the code runs on an emulator mobile then we get the alert as "It is a mobile phone" else, we will get the output as "It is not a mobile phone".
68K+ Views
