1486 sujets

Web Mobile et responsive web design

Méthode de détection Iphone et Android

Bonjour,
Existe t-il une méthode fiable - celle sur le User Agent ne l'étant pas suffisamment d'après ce que j'ai compris - via les media queries (le handheld avec screen size max semble être malheureusement obsolète) pour détecter une Iphone ou un Android ? J'ai du mal à trouver des infos là-dessus.
Modifié par Hermann (23 Oct 2024 - 12:56)
Modérateur
Bonjour Hermann,

Il y a deux ou trois ans, j'avais recours à ce code (voir ci-dessous) dans le cadre d'un projet qui enregistrait, à l'époque, une fréquentation de l'ordre de 2 millions de visiteurs par jour en moyenne (mobile/desktop/tablet/fablet). Ce projet, il convient de le préciser, reposait sur un modèle adaptatif plutôt que responsive. Autrement dit, au moment du chargement de la page, le gabarit approprié était sélectionné et affiché.


navigator.userAgent.match(/SAMSUNG|SGH-[I|N|T]|GT-[I|P|N]|SM-[N|P|T|Z|G]|SHV-E|SCH-[I|J|R|S]|SPH-L/i)
/iPhone|iPad|iPod/i.test(navigator.userAgent)
/Windows Phone/i.test(navigator.userAgent)
/Android/i.test(navigator.userAgent)

Modifié par niuxe (23 Oct 2024 - 12:24)
Salut Nolem, toujours fidèle au poste Smiley smile
Ok méthode JS donc avec des If à ajouter je suppose ?
A quoi correspondent les lettres de la première ligne ?

Merci à toi !
Modérateur
Hermann a écrit :
Salut Nolem, toujours fidèle au poste Smiley smile
Ok méthode JS donc avec des If à ajouter je suppose ?
A quoi correspondent les lettres de la première ligne ?

Merci à toi !


bien sûr qu'il faut utiliser des if. En outre, tout dépend du contexte. Tu peux éviter une énorme structure de contrôle (if/else if/else if/else) en utilisant un Map¹ (de registre).
Les lettres correspondent à la signature d'un navigateur natif Samsung (de mémoire, webkit/chromium). 


let browser_map_detect = new Map()
browser_map_detect.set(/SAMSUNG|SGH-[I|N|T]|GT-[I|P|N]|SM-[N|P|T|Z|G]|SHV-E|SCH-[I|J|R|S]|SPH-L/i, 'is-android')
browser_map_detect.set(/Android/i, 'is-android')
browser_map_detect.set(/iPhone|iPad|iPod/i, 'is-ios')

for(let [pattern, cls] of browser_map_detect){
    if(pattern.test(navigator.userAgent)){
        document.body.classList.add(cls)
    }
}

____
¹ l'avantage d'un Map est que tu peux mettre ce que tu veux comme clef unique (bool, pattern, string, number, float, etc.) En Python, il y a le même principe. Mais ce sont les dictionnaires (un peu l'équivalent array assoc en php).
Modifié par niuxe (23 Oct 2024 - 14:43)
Ok merci beaucoup pour le code, je connaissais pas (et je ne maitrise pas les autres langages que tu évoques en bas).
Je mettrai le post en résolu une fois que j'aurai pu tester.
Modifié par Hermann (23 Oct 2024 - 16:29)
Modérateur
Rodolphe a écrit :
Probablement plus fiable : utiliser matchMedia (en JavaScript) et une media query pour savoir qu'on est sur un écran de petite dimension.

https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html

Par exemple

if (window.matchMedia("width <= 640px").matches) {


Bonjour Rodolphe,

Dans la question initiale d’Hermann, il est parfois difficile de distinguer entre un appareil Android ou iOS. La détection que tu proposes, repose ici uniquement sur un booléen déterminé par la résolution d’écran. Il arrive aussi que certaines particularités d’Android ou iOS posent des contraintes, notamment en matière de compatibilité avec HTML/CSS/JS, certaines fonctionnalités n’étant pas toujours prises en charge¹. Smiley smile Aussi, il arrive parfois que des demandes très spécifiques émanent directement des équipes métier².
______
¹ À titre d’exemple : la balise <dialog> pour laquelle j’avais dû ajouter un polyfill adapté. D’autres problèmes ont également émergé avec l’affichage des publicités, tant sous iOS que sous Android.
² L’utilisateur se trouvait sur un appareil mobile (sur le site web), et il m’incombait d’afficher un bandeau publicitaire lui proposant de télécharger l’application mobile correspondant à l’environnement dans lequel il naviguait.
Modifié par niuxe (26 Oct 2024 - 13:14)
Modérateur
Hermann a écrit :
Merci Rodolphe mais quel est l'avantage sur de simples media queries ?


Tu vas pouvoir déterminer, en fonction de la résolution de l’écran, si tu es sur un mobile, une tablette ou un ordinateur de bureau. En revanche, cela ne te permettra pas de connaître précisément l’environnement utilisé. Pour plus de détails, je t’invite à consulter ma réponse précédente.
niuxe a écrit :


Tu vas pouvoir déterminer, en fonction de la résolution de l’écran, si tu es sur un mobile, une tablette ou un ordinateur de bureau. En revanche, cela ne te permettra pas de connaître précisément l’environnement utilisé. Pour plus de détails, je t’invite à consulter ma réponse précédente.


Ok merci à toi !
Modérateur
Bonjour,

Et si l'internaute est sur un ordinateur de bureau et a réduit la fenêtre de son navigateur ?

Amicalement,
perso j'utilise ça au besoin, jamais eu de problèmes


//check OS
function getOS() {
  let userAgent = window.navigator.userAgent.toLowerCase(),
    macosPlatforms = /(macintosh|macintel|macppc|mac68k|macos)/i,
    windowsPlatforms = /(win32|win64|windows|wince)/i,
    iosPlatforms = /(iphone|ipad|ipod)/i,
    os = null;

  if (macosPlatforms.test(userAgent)) {
    os = "macos";
  } else if (iosPlatforms.test(userAgent)) {
    os = "ios";
  } else if (windowsPlatforms.test(userAgent)) {
    os = "windows";
  } else if (/android/.test(userAgent)) {
    os = "android";
  } else if (!os && /linux/.test(userAgent)) {
    os = "linux";
  }

  return os;
}
Prévenir un modérateur
Répondre au sujet
Aller à