Often web developers need to customize their websites and applications as per the device used by its visitors. One of the most common requirements is to personalize website/app to work well on iOS devices, since they are so widely used. In such cases, developers need to first detect if device is iOS on client side. In this article, we will learn how to do this using plain JavaScript.
How to Detect if Device is iOS
Most modern web browsers support navigator object that contains information about user’s browsers and device. It features many useful properties. Among them, we will use its navigator.platform property to determine user’s device. Here is a sample code snippet to check if device is iOS.
function check_iOS() {
return [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod'
].includes(navigator.platform)
// iPad on iOS 13 detection
|| (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}
When you call this function, it will return true if the navigator.platform string contains values like iPhone, iPad, etc. else it will check navigator.userAgent property’s value. If neither navigator.platform nor navigator.userAgent contains iOS related values then it will return false.
Many people also use navigator.userAgent to detect iOS, as shown below but it seems to fail on devices running iOS 13.
var iOS = !window.MSStream && /iPad|iPhone|iPod/.test(navigator.userAgent);
We have looked at a couple of simple ways to detect if device is iOS. But please note, both navigator.platform and navigator.useAgent values can be faked using browser extension. People use such browser extension if they find the website or application to be unnecessarily restrictive on their web browsers and they want to avail certain features that might have been disabled otherwise on their device.
Nevertheless, you can use the above code to personalize websites and apps according to user devices.
Also read:
How to Count Character Occurrence in String Using JS
How to Add Auto Increment ID to Existing Table in JS
JS File Upload Size Validation
How to Print Contents of Div in JavaScript
How to Check if Web Page is Loaded in IFrame or Web Browser