Detect a device is iOS or not using JavaScript

In order to detect a device whether it is iOS or not. We’re going to Navigator platform and Navigator userAgent property.

  • Navigator userAgent property
    This property returns the value of the user-agent header which is sent by the browser to the server.
    Returned value, have information about the name, version, and platform of browser.
    Syntax:

    navigator.userAgent
    

    Return value:
    It returns a string, denoting the user agent string for the current working browser.

  • Navigator platform property
    This property returns the platform for which the browser is compiled.
    Syntax:

    navigator.platform
    

    Return value:
    It returns a string, representing platform of browser.
    Possible values.

    • HP-UX
    • Linux i686
    • Linux armv7l
    • Mac68K
    • MacPPC
    • SunOS
    • Win32
    • Etc.

Example 1:This example detects the device by (navigator.userAgent) property and returns false.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Detecting a device is iOS.
    </title>
</head>
  
<body style="text-align:center;"
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px; 
              font-weight: bold;"> 
      Detecting whether a device is iOS.
    </p>
    <button onclick="gfg_Run()">
        detect
    </button>
    <p id="GFG_DOWN"
       style="color:green; 
              font-size: 23px;
              font-weight: bold;">
    </p>
    <script>
        var el_down = 
            document.getElementById("GFG_DOWN");
  
        function gfg_Run() {
            var iOS = 
                /iPad|iPhone|iPod/.test(navigator.userAgent) &&
                !window.MSStream;
            el_down.innerHTML = iOS;
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example detects the device by (navigator.platform) property and returns true.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Detecting a device is iOS.
    </title>
</head>
  
<body style="text-align:center;" 
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px; font-weight: bold;">
      Detecting whether a device is iOS.
    </p>
    <button onclick="gfg_Run()">
        detect
    </button>
    <p id="GFG_DOWN" 
       style="color:green; 
              font-size: 23px; 
              font-weight: bold;">
    </p>
    <script>
        var el_down = 
            document.getElementById("GFG_DOWN");
  
        function gfg_Run() {
            var iOS = 
                !!navigator.platform &&
                /iPad|iPhone|iPod/.test(navigator.platform);
            el_down.innerHTML = iOS;
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 3:This example detects the device by (navigator.platform) property and returns false.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Detecting a device is iOS.
    </title>
</head>
  
<body style="text-align:center;" 
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px; 
              font-weight: bold;">
      Detecting whether a device is iOS.
    </p>
    <button onclick="gfg_Run()">
        detect
    </button>
    <p id="GFG_DOWN" 
       style="color:green;
              font-size: 23px; 
              font-weight: bold;">
    </p>
    <script>
        var el_down = document.getElementById("GFG_DOWN");
  
        function gfg_Run() {
            var iOS = 
                !!navigator.platform && 
                /iPad|iPhone|iPod/.test(navigator.platform);
            el_down.innerHTML = iOS;
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.