Numerous operations function across desktop, tablet, and mobile platforms. We can identify the operation that is active on mobile devices. There are multiple techniques available for detecting mobile devices, such as utilizing the "window.navigator.userAgent" and "window.orientation" methods.
Method 1: Making use of the guide.userAgent Property
We will leverage the window navigator object, which contains comprehensive details about the browser, to detect a mobile device through JavaScript. The userAgent property, which returns the user-agent header that the browser sends to the server, will be the key element we employ to recognize a mobile device.
The details concerning a mobile device include the browser name, version, and platform. You can retrieve this information by utilizing this function, and these values are derived from this Property.
Syntax:
The syntax in JavaScript used to identify a mobile device is as follows:
window.navigator.userAgent ;
Step to the Procedures
The following steps outline how to use JavaScript to identify a mobile device:
- Make a button and connect it to the function known as function.
- We will now build one "if loop" in the function.
- Using the navigator, we will write some criteria inside the "if loop" for any mobile device that can be detected using the userAgent parameter.
- We have written conditions that are compatible with every kind of mobile device, including Android , webOS , iPad, iPhone, iPod, BlackBerry, and Windows Phone.
- If a mobile device is identified, the result will be true once all conditions have been verified.
- If no mobile device is identified, the else loop returns false in the 'a' variable.
- Print the value of an in the response variable , which is connected to the paragraph tag with an id result, at the end to display the value on the screen as true or false.
Example
The example provided demonstrates the identification of a device as mobile or non-mobile. It displays Boolean values that indicate the presence of mobile devices.
<!DOCTYPE html>
<html>
<head>
<title>
How to detect mobile devices using javascript
</title>
</head>
<body style = "text-align:center; background-color:aqua;">
<h4>
How to detect mobile devices using javascript
</h4>
<button id = "click" onclick="myfunctions()"> Check</button>
<p id = "results">
</p>
<script>
var a_output;
var outputs = document.getElementById("results");
function myfunctions() {
if (window.navigator.userAgent.match(/Android/i)
|| window.navigator.userAgent.match(/webOS/i)
|| window.navigator.userAgent.match(/iPhone/i)
|| window.navigator.userAgent.match(/iPad/i)
|| window.navigator.userAgent.match(/iPod/i)
|| window.navigator.userAgent.match(/BlackBerry/i)
|| window.navigator.userAgent.match(/Windows Phone/i)) {
a_output = true ;
} else {
a_output = false ;
}
outputs.innerHTML = "Device Availability: " +a_output;
}
</script>
</body>
</html>
Output
The result displays the Boolean values pertaining to the identification of mobile devices.
Explanation
To obtain the output "true" from the aforementioned code, it is necessary to run your code with the Chrome developer tools and choose the mobile devices option. By accessing the mobile emulation feature within the developer tools, you can utilize the provided code to identify the presence of mobile devices. Simply select any device from the available options in the emulator list to simulate a mobile environment.
Upon execution of the code, a window titled "Check" will appear. Select this button to verify whether the mobile device can be recognized. The result will return true if the code is run on a mobile device, while it will return false in all other cases.
Method 2: use the window.orientation method
The user-agent strings utilized in this approach are susceptible to simple spoofing. Consequently, this method is not the most reliable for detecting a mobile device using JavaScript. Alternatively, we can leverage the window.orientation method in JavaScript to discern a mobile device by examining the orientation of the device's viewport.
It provides values measured in degrees, including -90, 0, 90, and 180. Each of these figures signifies a unique perspective. A device is classified as mobile if the viewport value exceeds 0; if not, it does not qualify as a mobile phone.
NOTE: This functionality is no longer encouraged and is deprecated.
Steps of the procedures
Here are the steps to use JavaScript to detect a mobile device:
- Make a button and associate it with the "myfunction" function.
- We will now define the function inside the script tag.
- The window orientation method will be used to determine whether the orientation value is larger than -1 by creating a variable called an answer.
- The alert method, which prints "It is a mobile phone" if the response variable's value is true, is called in the following line.
- The value will display "It is not a mobile phone" otherwise.
Example
The subsequent example demonstrates how to determine if the device in use is a mobile one. It presents data information along with an alert box that indicates the detection of a mobile device.
<!DOCTYPE html>
<html>
<head>
<title>
How to detect mobile devices using javascript
</title>
</head>
<body style = "text-align:center; background-color:aqua;">
<h4>
How to detect mobile devices using javascript
</h4>
<button id = "click" onclick="myfunctions()"> Check</button>
<p id = "results">
</p>
<script>
var a_output;
var outputs = document.getElementById("results");
function myfunctions() {
var answers = window.orientation > 1;
alert(answers ? 'It is a mobile phone': 'It is not a mobile phone');
outputs.innerHTML = answers ? 'It is showing a mobile device': 'It is not a mobile device'
}
</script>
</body>
</html>
Output
The results display the values associated with the identification of mobile devices.
Method 3: Detect website is open on mobile device
With Javascript, it is possible to determine if a website is being accessed from a mobile device. The "navigator.userAgent" property can be utilized to identify the compatibility of a website with mobile devices. This approach allows us to differentiate between mobile devices, tablets, and desktop computers.
Syntax
The subsequent JavaScript syntax can be employed to identify a mobile device for a website.
navigator.userAgent ;
Examples
The subsequent examples illustrate whether the utilized device is classified as mobile or not. The device presents Boolean values that indicate the presence of a mobile device.
Example 1:
The subsequent example demonstrates how to verify the functionality of a website on a mobile device. The device presents Boolean values used for identifying mobile devices.
<!DOCTYPE html>
<html>
<head>
<title>
How to detect mobile devices using javascript
</title>
</head>
<body style = "text-align:center; background-color:aqua;">
<h4>
How to detect website work on mobile devices using javascript
</h4>
<button id = "click" onclick="myfunctions()"> Check</button>
<p id = "results">
</p>
<script>
var a_output;
var outputs = document.getElementById("results");
function myfunctions() {
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_output = true ;
} else {
a_output = false ;
}
outputs.innerHTML = "Device Availability: " +a_output;
}
</script>
</body>
</html>
Output
The result displays the Boolean values indicating the identification of mobile devices.
Example 2:
The subsequent example illustrates whether the website is functioning correctly on a mobile device.
<!DOCTYPE html>
<html>
<head>
<title>
How to detect mobile devices using javascript
</title>
</head>
<body style = "text-align:center; background-color:aqua;">
<h4>
Detect mobile devices for website users using javascript
</h4>
<button id = "click" onclick="myfunctions()"> Check</button>
<p id = "results">
</p>
<script>
var a_output;
var outputs = document.getElementById("results");
function myfunctions() {
/* using the method to sort the user's device details */
let details_var = navigator.userAgent;
/* Creating a regular expression with the different mobile device keywords
to search details string*/
let regexp_pattern = /android|iphone|kindle|ipad/i;
/* Using test() method to get the match with the regex pattern and returns boolean value*/
let isMobile_var = regexp_pattern.test(details_var);
if (isMobile_var) {
outputs.innerHTML = "<h3> It is a Mobile Device !</h3> Mobile Availability: " +isMobile_var;
} else {
outputs.innerHTML = "<h3> It is a Not Mobile Device !</h3> Mobile Availability: " +isMobile_var;
}
}
</script>
</body>
</html>
Output
The result displays the Boolean values that indicate the identification of mobile devices.
Method 4: use the "navigator.vendor" method
The navigator.vendor method identifies potential mobile devices. This allows us to determine if the device in question is classified as mobile or not.
Example:
The subsequent example demonstrates the functionality of the website when accessed via a mobile device.
<!DOCTYPE html>
<html>
<head>
<title>
How to detect mobile devices using javascript
</title>
</head>
<body style = "text-align:center; background-color:aqua;">
<h4>
Detect mobile devices for website users using javascript
</h4>
<p> We can use the "navigator.vendor" method </p> <br>
<button id = "click" onclick="myfunctions()"> Check</button>
<p id = "results">
</p>
<script>
var a_output;
var outputs = document.getElementById("results");
function myfunctions() {
/* using the method to sort the user's device details */
let details_var = navigator.vendor;
/* Creating a regular expression with the different mobile device keywords
to search details string*/
let regexp_pattern = /android|iphone|kindle|ipad/i;
/* Using test() method to get the match with the regex pattern and returns boolean value*/
let isMobile_var = regexp_pattern.test(details_var);
if (isMobile_var) {
outputs.innerHTML = "<h5> It is a Mobile Device !</h5> Mobile Availability: " +isMobile_var;
} else {
outputs.innerHTML = "<h5> It is a Not Mobile Device !</h5> Mobile Availability: " +isMobile_var;
}
}
</script>
</body>
</html>
Output
The result displays the Boolean values pertaining to the identification of mobile devices.