How to detect device name in Safari on iOS 13 while it doesn't show the correct user agent? How to detect device name in Safari on iOS 13 while it doesn't show the correct user agent? ios ios

How to detect device name in Safari on iOS 13 while it doesn't show the correct user agent?


Indeed, while option change in Settings may be a good solution for the user, as a developer you can't rely on that. It is as weird as to ask the user to not to use dark mode cause your app doesn't support it instead of opt-out of it using plist.

As for me, the most simple way to detect iOS / iPad OS device now:

let isIOS = /iPad|iPhone|iPod/.test(navigator.platform) ||(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)

The first condition is old-fashioned and works with previous versions,while the second condition works for iPad OS 13 which now identifies itself as:

"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko)"

which by all platform detectors I know is not detected (for now) neither as mobile nor desktop.

So since iPad OS now calls itself Macintosh, but real macs have no multi-touch support, this solution is ideal to detect iPad OS devices which are the only multi-touch "Macintosh" devices in existence.

P.S.Also, you may want to augment this checkup for IE exclusion from being detected as an iOS device

let isIOS = (/iPad|iPhone|iPod/.test(navigator.platform) ||(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&!window.MSStream


const isIOS = !!(/iPad|iPhone|iPod/.test(navigator.platform)  || (navigator.platform === "MacIntel" && typeof navigator.standalone !== "undefined"))

As an alternative to the accepted answer, I found you can use the navigator.standalone param. It's non-standard and used only on iOS Safari at present:

Navigator.standalone

Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.

When combined with navigator.platform === "MacIntel" iPad's are the only devices that define this property, therefore typeof navigator.standalone !== "undefined" filters out Macs running Safari (touchscreen or not).


     function mobileDetect() {    var agent = window.navigator.userAgent;    var d = document;    var e = d.documentElement;    var g = d.getElementsByTagName('body')[0];    var deviceWidth = window.innerWidth || e.clientWidth || g.clientWidth;    // Chrome    IsChromeApp = window.chrome && chrome.app && chrome.app.runtime;    // iPhone    IsIPhone = agent.match(/iPhone/i) != null;    // iPad up to IOS12    IsIPad = (agent.match(/iPad/i) != null) || ((agent.match(/iPhone/i) != null) && (deviceWidth > 750)); // iPadPro when run with no launch screen can have error in userAgent reporting as an iPhone rather than an iPad. iPadPro width portrait 768, iPhone6 plus 414x736 but would probably always report 414 on app startup    if (IsIPad) IsIPhone = false;    // iPad from IOS13    var macApp = agent.match(/Macintosh/i) != null;    if (macApp) {        // need to distinguish between Macbook and iPad        var canvas = document.createElement("canvas");        if (canvas != null) {            var context = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");            if (context) {                var info = context.getExtension("WEBGL_debug_renderer_info");                if (info) {                    var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);                    if (renderer.indexOf("Apple") != -1) IsIPad = true;                }                ;            }            ;        }        ;    }    ;    // IOS    IsIOSApp = IsIPad || IsIPhone;    // Android    IsAndroid = agent.match(/Android/i) != null;    IsAndroidPhone = IsAndroid && deviceWidth <= 960;    IsAndroidTablet = IsAndroid && !IsAndroidPhone;    message = ""    if (IsIPhone) {        message = "Device is IsIPhone"    }    else if (IsIPad) {        message = "Device is ipad"    } else if (IsAndroidTablet || IsAndroidPhone || IsAndroid) {        message = "Device is Android"    } else {        message = "Device is Mac ||  Windows Desktop"    }    return {        message: message,        isTrue: IsIOSApp || IsAndroid || IsAndroidTablet || IsAndroidPhone    }}const checkMobile = mobileDetect()alert(checkMobile.message + "  =====>  " + checkMobile.isTrue)shareeditdeleteflag