How to Detect a Mobile Device in jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the JS matchMedia() Method

You can simply use the JavaScript window.matchMedia() method to detect a mobile device based on the CSS media query. This is the best and most reliable way to detect mobile devices.

The following example will show you how this method actually works:

<script>
$(document).ready(function(){
    if(window.matchMedia("(max-width: 767px)").matches){
        // The viewport is less than 768 pixels wide
        alert("This is a mobile device.");
    } else{
        // The viewport is at least 768 pixels wide
        alert("This is a tablet or desktop.");
    }
});
</script>

The matchMedia() method is supported in all major modern browser such as Chrome, Firefox, Internet Explorer (version 10 and above), and so on.

Related FAQ

Here are some more FAQ related to this topic:

• How to detect screen resolution with JavaScript
• How to capture browser window resize event in JavaScript
• How to add a class to a given element in JavaScript