Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to detect a 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;
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 = "Mobile device detected";
} else {
a = "Desktop device detected";
}
answer.innerHTML = a;
}
</script>
</body>
</html>
Note ? To get the output from the above code as 'Mobile device detected' 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.
Approach 2: Using window.orientation (Deprecated)
This method uses the window.orientation property to detect a mobile device by checking for the orientation of the viewport. It provides certain values in degrees like 0, 90, 180, -90. If the orientation property exists, it typically indicates a mobile device.
Note ? This feature is deprecated and no longer recommended for modern applications.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body style="text-align:center;">
<button id="browse" onclick="myfunction()">Check</button>
<script>
function myfunction() {
var isMobile = (typeof window.orientation !== "undefined");
alert(isMobile ? 'It is a mobile device' : 'It is not a mobile device');
}
</script>
</body>
</html>
Modern Approach: Using CSS Media Queries with JavaScript
A more reliable modern approach is to use CSS media queries with JavaScript's matchMedia() method:
<!DOCTYPE html>
<html>
<head>
</head>
<body style="text-align:center;">
<button onclick="checkDevice()">Check Device Type</button>
<p id="device-result"></p>
<script>
function checkDevice() {
const isMobile = window.matchMedia("(max-width: 768px)").matches;
const hasTouch = 'ontouchstart' in window;
let result = "";
if (isMobile || hasTouch) {
result = "Mobile/Touch device detected";
} else {
result = "Desktop device detected";
}
document.getElementById("device-result").innerHTML = result;
}
</script>
</body>
</html>
Comparison of Methods
| Method | Reliability | Modern Support | Recommended |
|---|---|---|---|
| User Agent | Low (can be spoofed) | Yes | No |
| window.orientation | Medium | Deprecated | No |
| Media Queries + Touch | High | Yes | Yes |
Conclusion
While user-agent detection is common, it's unreliable due to spoofing. The modern approach combines CSS media queries with touch detection for better accuracy. Use matchMedia() with screen size and touch capability checks for the most reliable mobile device detection.
70K+ Views
