1485 sujets

Web Mobile et responsive web design

Détecter tablette - Meilleure pratique ?

Bonjour à tous,

Je n'ai pas trouver de réponse précise sur le sujet sur le forum ou ailleurs...
Alors voilà, comme les résolution des tablettes augmentent très vite,
comment faire pour savoir à tous les coups si le site est vu sur une tablette ?
Les media queries semblent pas suffisant, une solution javascript est peut être nécessaire ?

Avez-vous des retours la dessus ?

Merci
Hello,
Heillige Leben a écrit :
Les media queries semblent pas suffisant

Non, c'est vrai mais dans le cas d'un site vraiment responsive, ce n'est pas forcément utile de savoir si l'on est sur un grand mobile ou une petite tablette ou encore sur une grande tablette ou un ordinateur… on s'en fiche : on adapte les éléments du site au viewport et pi voilà Smiley ravi

Si l'on veut vraiment détecter ça (pour une raison plus ou moins valable), il reste la détection du user agent… qui ne sera pas recommandée dans la majorité des cas (à moins de n'avoir qu'un seul et unique site à maintenir dans la durée à la rigueur).

A part ça, je crois qu'il y a des possibilités de détection des fonctionnalités de l'appareil, mais je suis pas sûr que ça soit beaucoup plus pertinent que les media queries, ni plus pratique (et intéropérable) que la détection bourrine via user agent…
Du point de vue de l'ergonomie et de la lisibilité par exemple,
sur un écran d'ordinateur le texte de labeur est parfais en 1 em, mais sur une tablette il faudrait le passer à 1.5 em voir 2.

Ce n'est qu'un exemple; et je ne parle pas de la navigation des sites sur les tablettes...

Je suis un peu extrémiste, mais je trouve que le "responsive" est une mauvaise solution et parfois oblige à charger des éléments pour ne pas les afficher.
D'ou mon envie d'avoir un détection plus fine...

J'ai trouvé ce fil sur le forum
http://forum.alsacreations.com/topic-27-63364-1-Differencier-les-telephones-mobiles-des-tablettes-avec-le-User-Agent.html
Oui mais ça c'est du user agent sniffing.
Si tu as un seul site à maintenir, pourquoi pas, faudra juste pense à mettre à jour la BDD régulièrement… Bon courage Smiley sweatdrop

Heillige Leben a écrit :
Je suis un peu extrémiste, mais je trouve que le "responsive" est une mauvaise solution et parfois oblige à charger des éléments pour ne pas les afficher.

Tout dépend de la conception de l'interface en fait.

Bien sûr, parfois il peut y avoir une ou deux concessions d'un côté comme de l'autre, mais le fait de devoir masquer un ou deux éléments léger par media query interposée ne me semble pas suffisant pour se passer du responsive dans l'immense majorité des cas auxquels je suis confronté.

Après, on tombe rapidement sur du site dédié si l'on suit ton point de vue. Pourquoi pas, bien sûr, mais effectivement on n'est plus du tout dans l'idée du responsive / un seul site pour tous les appareils.
Modifié par audrasjb (21 Aug 2014 - 12:05)
Afin de détecter le device, moi je préfère utiliser modernizr.js pour détecter si le device supporte le touch ou non.<br>
Si la fonction touch est supporté donc le device sera mobile ou tablette et dans le cas contraire c’est du desktop.
Voici un exemple de test en jquery :

if ( !Modernizr.touch ) {
    // si le navigateur supporte le touch donc le device mobile / tablette
    // Effectuer les actions entre ces crochets
}

voici l'article sur http://integrateurinformatique.com/zoom-sur-le-plugin-javascript-modernizr/
Salut !

@integrateur75 : Sais-tu ce qui ce passe sur un ordinateur tactile ? As-tu l'interface mobile ou desktop ?
AMHA, entre :

@media screen {
  p{
     font-size: 1.2em;
  }
}

@media screen and (min-width: 640px) {
  p{
     font-size: 1.2em;
  }
}


et du JS pour détecter si je suis sur tablette, mon choix est vite fait (dans presque tous les cas. Cela me semble contre productif de vouloir cibler via JS (en RWD) le device pour éviter 4 lignes de CSS. Rapport poids (performances) / objectif.
Modifié par Ruben (16 Dec 2014 - 16:55)
Sujet clos
Aller à