11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Détection d'iPad avec JS pour charger une page de style CSS

[Résolu]

Bonjour,
Je ne suis pas pro du JavaScript et j'ai cette ligne de code qui, selon le web, me permettre d'adapter mes pages web aux iPad sans affecter les utilisateurs de 1024 x 768. Que me manque-t-il pour que cela fonctionne, merci.


if( navigator.userAgent.match(/iPad/i) != null )
{
     // javascript à faire si l'iPad est détecté charger le style CSS
}

Modifié par Epheme (02 Jun 2011 - 02:16)
Bonjour,

Le bout de code js sert uniquement à détecter si le navigateur utilisé est un iPad ou pas.
Si c'est bien un iPad, il exécute le code javascript situé entre les {...}.
Ce code chargera par exemple la bonne feuille de style pour iPad, les bons templates, les bons scripts etc.

Ce code, tu dois bien sûr le créer toi-même en javascript Smiley langue !
Une petite recherche devrait t'apporter des exemples de scripts de ce genre.
paolo a écrit :
Les media queries sont un moyen préférable à la détection de l'UA pour cet usage.


Le problème avec les media queries est qu'en ciblant les iPads (1024x768), on affecte les utilisateurs sur ordinateur ayant la même résolution d'écran, d'où la nécessité du JavaScript.
lddsoft a écrit :
Bonjour,

Le bout de code js sert uniquement à détecter si le navigateur utilisé est un iPad ou pas.
Si c'est bien un iPad, il exécute le code javascript situé entre les {...}.
Ce code chargera par exemple la bonne feuille de style pour iPad, les bons templates, les bons scripts etc.

Ce code, tu dois bien sûr le créer toi-même en javascript Smiley langue !
Une petite recherche devrait t'apporter des exemples de scripts de ce genre.


Je sais ce que le code doit faire, mais je ne sais pas comment lui dire de charger une autre feuille de style dans le cas d'un iPad. Je ne suis pas calé du tout en Java et je n'ai malheureusement rien trouvé sur le web, sinon je n'aurais pas posé la question sur le forum.
Je n'ai pas dit qu'il fallait éviter javascript, mais que la détection d'UA n'était pas la bonne méthode.
Regarde cette feuille de style et l'utilisation des media queries. Tu peux tester en redimensionnant ta fenêtre, ce n'est pas choquant sur un écran de netbook.

Juste une idée, je n'ai jamais eu à le faire :
Si tu tiens à différencier les utilisateurs de tablettes, tu peux par exemple ajouter par js une class 'ipad' sur le body, qui fera référence à des règles particulières de ta feuille de style.
Modifié par paolo (29 May 2011 - 18:58)
Merci à Paolo et Iddsoft, j'ai réussi avec les deux méthodes, à cibler les iPads/iPhones sans affecter le look normal.

Résolu.
Rappel qui va bien: la détection de l'agent utilisateur (navigateur, OS, device…) c'est le mal, c'est rarement fiable dans le temps et c'est très rarement justifié. En somme, c'est une mauvaise pratique.
surtout qu'avec l'arrivée des nouvelles tablettes cela me semble bizarre de vouloir détecter l'ipad et l'iphone .... ne vaut-il pas mieux détecter leurs capacités /résolutions ?
Sujet clos
Aller à