Detect a Desktop , Tablet or Mobile Device in jQuery

Detect a Desktop , Tablet or Mobile Device in jQuery

14-Sep-2024
| |
Image Carousel

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>

Output For Desktop/Tablet Devices

 

Output For Mobile Devices

Check Mobile Device

Tags: detect mobile using jquery , how to detect mobile and desktop using jquery , detect mobile screen using jquery,jquery , advance jquery , jquery advance code,
0 Comments (Please let us know your query)
Leave Comment
Leave Comment
Articles from other Categories
Load More

Newsletter