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> |
Output:
-
Before clicking on the button:
-
After clicking on the button:
