Detect a Desktop , Tablet or Mobile Device in jQuery
14-Sep-2024
|
|
Table of Contents
| S.no | Contents-topics |
|---|---|
| 1 | Introduction |
| 2 | HTML code |
1:Introduction
We can use JavaScript window.matchMedia() method to detect a mobile device based on the CSS media query. This is the best and easiest way to detect mobile devices. So we can call the JavaScript window.matchMedia() method and set the max-width : 767px to check for mobile devices.
2:HTML code
Code:.Copy
<!DOCTYPE html>
<html lang="en">
<head>
<title>
jQuery Detect Developer Corner Mobile Device
</title>
</head>
<body>
<script>
if (window.matchMedia("(max-width: 767px)").matches)
{
// The viewport is less than 768 pixels wide
document.write("This is Developer Corner mobile device.");
} else {
// The viewport is at least 768 pixels wide
document.write("This is Developer Corner tablet or desktop.");
}
</script>
</body>
</html>
Also read:ENABLE/LOAD AND DISABLE CSS USING JQUERY
Output For Desktop/Tablet Devices
Output For Mobile Devices
We are Vineet Maanas we are working as professional developers from the last 8 years and always looking to discover something amazing getting followed by market trends and always push new developers to learn something new with our tutorials Thankyou.
0 Comments (Please let us know your query)