web-dev-qa-db-fra.com

Comment détecter le nom de l'appareil dans Safari sur iOS 13 alors qu'il n'affiche pas l'agent utilisateur correct?

Après les reales iOS 13 d'Apple, j'ai réalisé window.navigator.userAgent dans Safari sur iPad iOS 13 est le même que sur MacOS. Quelque chose comme ça:

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

Comme vous le voyez, c'est un mauvais user-agent pour iPad et même il n'y a aucun moyen de détecter si l'appareil actuel est un iDevice.

Après une première recherche, j'ai trouvé un moyen de le contourner:

Accédez à Paramètres -> Safari -> Demander le site Web du bureau -> Tous les sites Web. Vous remarquez que "Tous les sites Web" est activé par défaut. Si vous désactivez et obtenez window.navigator.userAgent, l'agent utilisateur correct est maintenant affiché.

mais je ne peux pas demander à chaque utilisateur de faire ce changement de paramètre pour chaque appareil. J'ai donc essayé de trouver un autre moyen et j'ai fini par écrire le code suivant qui vérifie s'il s'agit de Safari, macOS et écran tactile, alors l'appareil devrait être un Apple appareil mobile, mais je me demande s'il existe une meilleure suggestion/manière de détecter le nom d'appareil correct dans 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;
};
javascriptiossafariuser-agentios13
47
Saeid Amanzadeh

En effet, bien que le changement d'option dans les paramètres puisse être une bonne solution pour l'utilisateur, en tant que développeur, vous ne pouvez pas vous y fier. C'est aussi bizarre que de demander à l'utilisateur de ne pas utiliser le mode sombre car votre application ne le prend pas en charge au lieu de le désactiver à l'aide de plist.

Quant à moi, le moyen le plus simple de détecter un appareil iOS/iPad OS maintenant:

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

La première condition est à l'ancienne et fonctionne avec les versions précédentes, tandis que la deuxième condition fonctionne pour iPad OS 13 qui s'identifie désormais comme "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, comme Gecko ) "qui, par tous les détecteurs de plate-forme que je connais, n'est pas détecté (pour l'instant) ni comme mobile ni comme ordinateur de bureau.

Ainsi, puisque l'iPad OS s'appelle désormais Macintosh, mais que les vrais mac n'ont pas de prise en charge multi-touch, cette solution est idéale pour détecter les appareils iPad OS qui sont les seuls appareils "Macintosh" multi-touch existants.

P.S. En outre, vous souhaiterez peut-être augmenter cette vérification pour IE exclusion d'être détecté en tant qu'appareil iOS

let isIOS = (/iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream
52
kikiwora
 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

0
Mahmoud D. Alghraibeh