Detect a device is iOS or not using JavaScript

0 0 2 minutes read

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.

<!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> 

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.

<!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> 

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.

<!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> 