WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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 detected 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:

Your Feedback:

We would love to hear from you, please drop us a line.