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)

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
Ok méthode JS donc avec des If à ajouter je suppose ?
A quoi correspondent les lettres de la première ligne ?

Merci à toi !

Hermann a écrit :
Salut Nolem, toujours fidèle au poste
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)

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) {

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¹. 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)