• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Frontend

categorizr.js et la détection de supports

Grâce à l’évolution des nouvelles technologies, de plus en plus de sites Web utilisent le Responsive Design pour être visibles sur tous supports existants, que ce soit sur mobile, tablette ou ordinateur de bureau. Cette fonctionnalité est aujourd’hui bien intégrée au concept de développement d’un site Internet, c’est pourquoi la demande se complexifie en implémentant des interactions et scénarios différents selon le support utilisé.

Dans ce cas précis, les Medias queries, basés sur la résolution d’écran, ne suffisent plus (surtout lorsque votre site possède déjà une largeur étroite en version PC). Le moyen le plus simple et efficace serait de détecter le user-agent utilisé par l’internaute. Pour cela, categorizr est un script pouvant effectuer cette détection et la catégorise dans un type donné : bureau, télévision, tablette ou mobile.

Comment l’utiliser ?

Son utilisation est assez simple, voici un exemple de code permettant d’affecter des actions différentes en fonction du support utilisé :

if (categorizr.isMobile) {
    //Votre code pour version mobile
} else if (categorizr.isTablet) {
    //Votre code pour version tablette
} else {
    //Votre code pour ordinateur de bureau et TV
}

Il est aussi possible de modifier le comportement d’un support en l’affectant à autre :

categorizr('tv', 'tablet');  // Tous les supports TV (smart-tv UA uniquement) auront un comportement identique à la tablette.

Combiné avec d’autres scripts comme Yepnope (qui permet de ne charger que les scripts utilisés sur la page en cours), les sites responsives mobiles et tablettes pourraient gagner en rapidité et performance utilisateur. Cet API s’avère donc très utile et complémentaire aux Medias queries pour répondre aux attentes responsives.

Vous pouvez télécharger ce script sur cette page : https://github.com/iamdustan/categorizr.js

16/05/2014 11 MIN READ BY: Lao Vang 0 COMMENT
SHARE
LIRE LA SUITE

Lao Vang

Wordpress, quelques codes utiles - Épisode 1

Présentation du fonctionnement de base d'un CMS

VOUS POURRIEZ AIMER

Frontend Tribute to WordArt

Frontend La 3d et le navigateur, c’est compatible ?

Frontend Kevin Schaaf – Encapsulating the Web

Frontend Unité de mesure CSS : REM

CMS Frontend La question du Responsive Design sous Drupal 7

Design Frontend La police : comment bien l’écrire ?

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect