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
JavaScript: How to Detect if a Website is Open on a Mobile or a Desktop?
We can use the CSS media queries to check whether the website is opened inside a web browser or a mobile browser. This information can be fetched using the min-width and the max-width of the webpage.
CSS media queries are only limited to styling the web pages but we can control the functionality of a website as per the user's device by using the navigator properties in JavaScript.
The Navigator returns a set of values that includes user browser, version, operating system, and many more.
Syntax
navigator.userAgent
Method 1: Using navigator.userAgent
In the below example, we are going to use Navigator to fetch the user's device details. This will fetch us the major info that includes user browser, version, operating system, and more.
<!DOCTYPE html>
<html>
<head>
<title>Device Detection Example</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<div id="result"></div>
<script>
/* Storing user's device details in a variable*/
let details = navigator.userAgent;
/* Creating a regular expression
containing some mobile devices keywords
to search it in details string*/
let regexp = /android|iphone|kindle|ipad/i;
/* Using test() method to search regexp in details
it returns boolean value*/
let isMobileDevice = regexp.test(details);
const resultDiv = document.getElementById('result');
if (isMobileDevice) {
resultDiv.innerHTML = "<h3>It's a Mobile Device!</h3>";
} else {
resultDiv.innerHTML = "<h3>It's a Desktop!</h3>";
}
</script>
</body>
</html>
Method 2: Using Screen Width Detection
Another approach is to detect the device based on screen width. Mobile devices typically have smaller screen widths than desktops.
<!DOCTYPE html>
<html>
<head>
<title>Screen Width Detection</title>
</head>
<body>
<h1>Screen Width Detection</h1>
<div id="output"></div>
<script>
function detectDevice() {
const screenWidth = window.screen.width;
const outputDiv = document.getElementById('output');
if (screenWidth <= 768) {
outputDiv.innerHTML = "<p>Mobile Device (Width: " + screenWidth + "px)</p>";
} else {
outputDiv.innerHTML = "<p>Desktop Device (Width: " + screenWidth + "px)</p>";
}
}
detectDevice();
</script>
</body>
</html>
Method 3: Using Touch Screen Detection
Modern browsers provide APIs to detect if the device supports touch events, which is typically associated with mobile devices.
<!DOCTYPE html>
<html>
<head>
<title>Touch Screen Detection</title>
</head>
<body>
<h1>Touch Screen Detection</h1>
<div id="touchResult"></div>
<script>
function detectTouchDevice() {
const hasTouchScreen = 'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0;
const resultDiv = document.getElementById('touchResult');
if (hasTouchScreen) {
resultDiv.innerHTML = "<p>Touch-enabled device (likely mobile/tablet)</p>";
} else {
resultDiv.innerHTML = "<p>Non-touch device (likely desktop)</p>";
}
}
detectTouchDevice();
</script>
</body>
</html>
Comparison of Methods
| Method | Accuracy | Browser Support | Limitations |
|---|---|---|---|
| User Agent | High | Excellent | Can be spoofed |
| Screen Width | Medium | Excellent | Tablets may be misclassified |
| Touch Detection | Medium | Good | Touch laptops may be detected as mobile |
Conclusion
The User Agent method is most reliable for device detection, though combining multiple methods provides better accuracy. Use regular expressions to match common mobile device keywords for robust detection.
9K+ Views
