How to detect a mobile device with JavaScript?
In this tutorial, we're going to learn how can we descry a mobile device over which we're working using JavaScript.
Approach 1 Using thenavigator.userAgent Property
To descry a mobile device with JavaScript we're going to use the window tar object which contains all the information regarding a cybersurfer. The property which we will use to descry a mobile device will be the userAgent property which is used to return the stoner- agent title transferred to the garçon by the cybersurfer. The value we admit from this property is the cybersurfer name, interpretation, and platform i.e., all the information regarding a mobile device you'll get using this function.
Syntax
Syntax to descry a mobile device with JavaScript is given as −
window.navigator.userAgent ;
or
navigator.userAgent ;
Steps
Steps to descry a mobile device using JavaScript are given below −
produce a button and link it with a function named as myfunction.
Now in the function we will produce one if circle.
Inside the if circle we will write some conditions usingnavigator.userAgent property to descry any mobile device.
The conditions we write will find match for each type of mobile bias similar as android, webOS, iPad, iPhone, iPod, BlackBerry, and windows Phone.
After checking all the conditions, it'll return true if any mobile device set up.
If any mobile device isn't set up than we get false in the' a' variable using differently circle.
At last print the value of a in the answer variable which is linked with the paragraph label with id affect to print the value either true or false on the screen
illustration
We can use the below HTML law to descry mobile device with JavaScript −
<!DOCTYPE html>
<html>
<head>
</head>
<body style="text-align:center;">
<button id="browseData" onclick="myfunction()"> Check Device</button>
<p id="checkDevice">
</p>
<script>
var a;
var response = document.getElementById("checkDevice"); 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 ;
}
response.innerHTML = a;
}
</script>
</body>
</html>
Note − To get the affair from the below law as ‘ true ’ you need to run your law using the chrome inventor tool by choosing the option of mobile phones. When you enter the mobile zone of the inventor tool there you can choose any mobile phone to work as an impersonator from the list of mobile bias present there to descry the presence of mobile phones using the below law.
On running the law, a button will appear on the window named Check by clicking you can descry the mobilephone.However, also the affair will be true else it'll be false, If the law is running on any mobile device.
Approach 2
But this system of stoner- agent isn't the stylish system to descry a mobile device with JavaScript because the stoner- agent strings can be caricatured veritably fluently. So, we can also use thewindow.orientation system to descry a mobile device using JavaScript, this system checks for the exposure of the viewport of the device. It provides us certain values in degrees like- 90, all these values signify different viewports. If the value of the viewport is lesser than 0 it means that the device is a mobile else it’s not a mobile phone.
Note − This point is disapproved and no longer recommended
Steps to descry a mobile device using JavaScript are given below −
produce a button and link it with a function named ‘ myfunction ’.
Now inside the script label, we will define the function.
produce a variable named as answer and inside it we will use thewindow.orientation system to check if the exposure value is lesser than-1 or not.
In the coming line, we will call the alert system which will publish the value as" It's a mobile phone" if the value of the answer variable is true.
else, the value will be shown as" It isn't a mobile phone".
illustration
We can use the below HTML law to descry mobile device with JavaScript −
<!DOCTYPE html>
<html>
<head>
</head>
<body style="text align:center;">
<button id="browseData" onclick="myfunction()">Check Device</button>
<script>
function myfunction() {
var response = window.orientation > 1;
alert(response ? 'It is a mobile device' : 'It is not a mobile device');
}
</script>
</body>
</html>
Note − To check the affair of this law we need to use the chrome inventor tool as used in the below law.
still, we will get the affair as" It isn't a mobile phone", If the law runs on an impersonator mobile also we get the alert as" It's a mobile phone" differently.
