如何在iOS 13上检测Safari中的设备名而不显示正确的用户代理？

Question

在苹果发布iOS 13之后，我意识到iOS in Safari on iPad iOS 13和在MacOS上是一样的。就像这样：

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

正如您所看到的，这是一个错误的iPad用户代理，并且无法检测当前设备是否是iDevice。

经过初步研究，我找到了一个解决办法：

转到设置-> Safari ->请求桌面网站->所有网站。您注意到，默认情况下，“所有网站”都启用了。如果禁用 it并获取window.navigator.userAgent，则将显示正确的用户代理。

但我不能要求每个用户对每个设备进行此设置更改。因此，我试图找到另一种方法，最后编写了代码，检查它是否是Safari、macOS和触摸屏，然后该设备应该是苹果移动设备，但我想知道是否有更好的建议/方法来检测Safari iOS 13中正确的设备名称？

detectOs = function(){
   //returns OS name, like "mac"
};

//is Safari on an apple touch-screen device
isSafariInIdevice = function(){
   if (/Safari[\/\s](\d+\.\d+)/.test(windows.navigator.userAgent)) {
      return 'ontouchstart' in window && detectOs() === "mac";      
   }
   return false;
};

Answer 1

事实上，虽然设置中的选项更改对于用户来说是一个很好的解决方案，但作为开发人员，您不能依赖这个解决方案。这是奇怪的要求用户不要使用黑暗模式，因为你的应用程序不支持它，而不是选择退出它使用plist。

至于我，现在检测iOS / iPad OS设备的最简单的方法是：

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

第一个条件是老式的，适用于以前的版本，而第二个条件适用于iPad OS 13，它现在标识为：

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

我所知道的所有平台检测器都没有检测到(目前)既不是移动的，也不是桌面的。

因此，由于iPad操作系统现在称自己为Macintosh，但真正的macs没有多点触摸支持，因此这种解决方案非常适合检测iPad OS设备，这是目前唯一的多点触摸"Macintosh“设备。

P.S.，您也可能希望加强此检查，以避免将IE排除为iOS设备。

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

Answer 2

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

作为接受的答案的另一种选择，我发现您可以使用navigator.standalone参数。它是不标准的，目前只用于iOS Safari：

Navigator.standalone

返回一个布尔值，该布尔值指示浏览器是否以独立模式运行。只在苹果的iOS Safari上提供。

结合navigator.platform === "MacIntel" iPad是唯一定义此属性的设备，因此typeof navigator.standalone !== "undefined"过滤掉了运行Safari (触摸屏与否)的Mac。

Answer 3

     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