How to detect a mobile device in jQuery?

How to detect the user's device using jQuery ?

Last Updated : 24 Jun, 2019

The task is to determine the user's device, whether it is iPad or not, using JQuery. Below are the required methods:

Navigator userAgent Property: This property returns the value of the header of user-agent which is sent by the browser to the server. Returned value, have information like name, version, and platform of the browser. Syntax:
```
navigator.userAgent
```
Return value: It returns a string, which represents the user agent string of the current browser.

Example: This example uses the navigator.userAgent property to identify the user's device.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        JQuery 
      | Detect iPad users.
    </title>
</head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>

<body style="text-align:center;" 
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 17px; 
              font-weight: bold;">
    </p>
    <button>
        click here
    </button>
    <p id="GFG_DOWN" 
       style="color: green; 
              font-size: 24px; 
              font-weight: bold;">
    </p>
    <script>
        $('#GFG_UP').text(
          "Click on the button to see "+
          "whether user's device is iPad or not");
      
        $('button').on('click', function() {
            var is_iPad = 
                navigator.userAgent.match(/iPad/i) != null;
            $('#GFG_DOWN').text(is_iPad);
        });
    </script>
</body>

</html>

Output:

Before reaching the bottom:
After reaching the bottom:

How to detect a mobile device in jQuery?

P

PranchalKatiyar

Improve

Article Tags :

Similar Reads

How to detect a mobile device in jQuery?

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. Syntax: window.matchMedia(); Example-1: Program run on desktop. html <!DOCTYPE html> <html lang="en"> <head>

How to make Check icon using jQuery Mobile ?

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making Check icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" hre

How to make an URL Input using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating an URL Input using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ href=â€h

How to write a browser-specific code using jQuery ?

In this article, we will see how to write browser-specific code using jQuery. To write the browser-specific code, we will use the Navigator userAgent property and jQuery indexof() method. The Navigator userAgent property is used to get the user-agent headerâ€™s value sent to the server by the browser.

How to make an Email Input using jQuery Mobile ?

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets,an and desktops. In this article, we will be creating an Email Input using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ hr

How to Hide an HTML Element in Mobile View using jQuery ?

Suppose we have given an HTML document and the task is to hide an HTML element in mobile view with the help of jQuery. Approach: Initially, we are required to detect whether our system is 'Mobile' or not, for that window.navigator.userAgent property is used. It returns a string containing informatio