Detect a Desktop/Tablet or Mobile Device in jQuery

Detect a Desktop/Tablet or Mobile Device in jQuery

22-Sep-2022
| |
Image Carousel

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.

Here is the code run on Desktop and Mobile.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

Tags: Desktop, Tablet, Mobile, jQuery,jquery , advance jquery , jquery advance code,
Related Articles
Load More

Newsletter