web-dev-qa-db-fra.com

Comment détecter l'iPad Pro comme iPad en utilisant javascript?

Nous avons pu détecter un appareil iPad en utilisant javascript comme ceci:

function isDeviceiPad(){
    return navigator.platform.match(/iPad/i);
}

Cela a parfaitement fonctionné pour détecter les appareils iPad, mais lorsque nous avons vérifié à partir d'une iPad Pro (10.5 inch), il ne détecte pas qu'il s'agit d'un iPad.

Pour approfondir nos recherches, nous avons exploré l'objet navigator, vérifié à la fois platform et userAgent, et obtenu ces résultats:

navigator.platform = 'MacIntel';
navigator.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) 
 AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15)';

Le problème est que navigator.platform = 'MacIntel' (Qui est le même que le MacBook Pro) est renvoyé au lieu de iPad. Nous avons besoin d'un moyen de détecter qu'il s'agit d'un iPad et non d'un MacBook Pro, mais il semble que le navigateur ne renvoie pas iPad comme il le fait avec des iPad plus anciens.

Une idée de comment résoudre ce problème?

javascriptiosios13ipados
6
Wonka

Vous pouvez utiliser l'expression régulière pour cela.

var isIPadPro = /Macintosh/.test(navigator.userAgent) && 'ontouchend' in document;
1
Lesha Petrov

La façon la plus simple de détecter un "iPad Pro 10.5 "est en vérifiant sa taille d'écran qui est "window.screen.height x window.screen.width = 1112 x 834"

Cependant, je me demande pourquoi vous devez détecter le modèle d'appareil. Dans le cas où vous souhaitez détecter les navigateurs mobiles, jetez un œil à cette question: Détection du navigateur mobile

1
Reza

Capacitor dispose d'un plugin Web utile pour obtenir des informations sur l'appareil ( https://capacitor.ionicframework.com/docs/apis/device#example ). Il ne fait pas de différence entre l'iPad Pro et l'iPad classique, mais vous pouvez alors combiner l'utilisation de ce plugin avec les solutions de taille d'écran proposées.

Si vous souhaitez le faire vous-même, vous pouvez consulter le code ici: https://github.com/ionic-team/capacitor/blob/master/core/src/web/device. ts

0
paulrostorp

Vous devriez pouvoir utiliser la taille de l'écran pour les distinguer. Je pensais que vous deviez trouver la valeur réelle pour chaque iPad pro que vous souhaitez détecter.

window.screen.height
window.screen.width
0
Jonatan Cloutier