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