Afficher selon la plate-forme de l'utilisateur: Ordinateur/Smartphone

Bonjour,

Je cherche à savoir si il est possible en PHP (ou autre) d'afficher du code en fonction de la plate-forme qu'utilise le visiteur:

Si il est sur ordinateur: afficher l'image 1 et masquer l'image 2
Si il est sur smartphone ou sur tablette: masquer l'image 1 et afficher l'image 2

Cela me semble clair, si je dois détailler plus dites le moi!

Merci,

F

Il existe des classes pour détecter la plate-forme en fonction du user-agent.

En PHP :
J'ai pu testé http://mobiledetect.net mais elle n'est pas 100% fiable (j'ai déjà eu un iPad détecté comme un mobile).
Sinon, http://wurfl.sourceforge.net offre une base de données assez large de tous les user-agent. Je ne l'ai pas encore testé, ça a l'air fiable mais assez lourd.
Il y a d'autres solutions existantes.

Attention, la détection via user-agent n'est pas fiable à 100% non plus.

Personnellement, je préfère détecter la résolution en javascript ou via les media-queries css et charger tel ou tel élément selon le besoin.

Bruno.
Modifié par blman (14 Oct 2014 - 16:40)

salut,
perso j'opterais pour Mobile-Detect et s'il détecte un iPad comme mobile c'est parce qu'il détecte les tablettes comme mobile. Il faut donc tester si c'est une tablette aussi (->isTablet).
Comme déjà dit, le user agent n'est pas du tout fiable et dit toi que ça sera seulement un plus, si l'utilisateur ne triche pas.
Pour la solution JS, il faut savoir que ce n'est pas la résolution de l'écran qui est indiquée mais seulement celle du navigateur (un simple zoom/dézoom ou redimensionnement de la fenêtre changera la valeur de celle-ci). Et puis le JS est encore moins fiable vu qu'il peut aisément être désactivé, chose qui peut exister plus souvent sur les mobiles.
Si tu passes par les Medias Queries en CSS, le simple fait de masquer une image pour une résolution donnée n'indique pas que cette image ne sera pas chargée. Donc je suppose que ce n'est pas ce que tu cherches.

Il ne faut pas se baser sur l'user-agent pour envoyer du code différencié, c'est mal... ça peut être mauvais pour le référencement, c'est pas terrible question maintenabilité, et comme déjà dit, c'est pas forcément très fiable.

Le problème c'est que pour le moment, il n'y a pas encore de vraie bonne solution. D'après ce que je comprends, ça reste encore à venir avec <picture> en ce qui concerne les images.