Chaque navigateur a son propre tamponGrâce à cela, sur notre site, nous pourrons identifier d'où vient une demande et à partir de quel navigateur elle a été faite, comme nous le savons bien, le navigateur Internet Explorer a toujours causé des maux de tête aux développeurs Web (bien que ces derniers temps il ait amélioré), car Nous pourrons vous identifier et vous montrer des règles alternatives pour résoudre ces petits problèmes.
Pour nous servir ?Imaginez que nous ayons un site Web tel que Facebook, où des millions de personnes entrent chaque jour, mais toutes ne le font pas à partir du même type d'appareils, il y a des personnes qui entrent depuis leur PC de bureau, d'autres depuis une tablette, d'autres depuis leur mobile, etc. Chaque appareil a un navigateur (ou plusieurs) et il a un agent, si nous pouvons l'identifier alors nous pouvons servir le contenu de manière appropriée, puisque l'affichage n'est pas le même pour tout le monde, chaque appareil sera vu d'une manière, et chaque navigateur peut interpréter les règles d'une manière différente (bien que cela diminue de plus en plus).
Nous avons discuté du fait que chaque navigateur a un agent qui nous permet de l'identifier, ci-dessous est un bref Code JavaScript pour obtenir l'agent de navigateur où il est utilisé :
Obtenir l'agent utilisateurLe code du script a été intégré dans le HTML pour plus de commodité. Si nous ouvrons le code précédent dans le navigateur Google Chrome, nous voyons ce qui suit :
AGRANDIR
Et si on le fait maintenant dans Internet Explorer :
AGRANDIR
Vous avez vérifié qu'il a été ouvert depuis Windows pour prendre les 2 captures précédentes, si nous l'ouvrons depuis Mozilla Firefox sous Linux nous voyons ceci :
Si vous voulez un code dans une langue pour le serveur, ci-dessous un code à voir comment obtenir l'agent en PHP, rappelez-vous que le JavaScript est possible pour l'utilisateur de le désactiver :
Nous allons maintenant passer à ce qui nous intéresse le plus, pour cela nous commencerons par regarder un exemple de ce dont nous avons discuté jusqu'à présent avec notre page : Solvetic.
Vérification de Solvetic
Si nous entrons dans Solvetic depuis notre PC, en utilisant le navigateur Google Chrome, nous verrons l'aspect suivant, complet, en un coup d'œil nous voyons tout en grand, zone pour se connecter et s'inscrire :
Mais si on entre depuis Google Chrome sur un mobile Android, tout le contenu n'entre pas à l'écran bien sûr, c'est quelque chose qu'il faut prendre en compte, ce n'est pas très agréable de devoir glisser son doigt pour voir les parties du screen (peu de sites sont comme ça de nos jours, heureusement), ci-dessous je laisse l'image de l'apparence de Solvetic sur mobile :
Comme on peut le voir, il s'adapte à l'écran, maintenant nous avons les menus en haut, si nous cliquons sur le côté gauche (les 3 barres) nous verrons les options pour accéder aux articles, tutoriels, etc.
Et si nous cliquons sur l'icône à droite (aspect du bouton marche / arrêt) nous avons les options pour se connecter ou s'inscrire.
Nous allons maintenant voir un moyen d'obtenir une page à servir, en fonction de l'appareil qui nous visite.
Comment arriver au résultat ?
Il existe plusieurs façons d'obtenir ce résultat, il existe des scripts qui sont placés directement dans l'application ou nous avons également des frameworks tels que Bootstrap, mais nous pouvons également obtenir un résultat similaire à partir de Nginx, car en reconnaissant l'agent du navigateur, nous pouvons effectuer une réécriture et envoyer à l'utilisateur vers une autre partie de l'application sans changer l'URL qu'il voit.
Si vous voulez connaître Nginx, nous laissons un lien ci-dessous, où vous pouvez également le télécharger :
Pour y parvenir, nous devons d'abord identifier l'agent du navigateur, s'il s'agit de l'un de ceux que nous voulons entrer dans la règle, nous utilisons un simple conditionnel et lui appliquons la règle, nous faisons tout cela dans notre bloc de localisation.
Regardons l'exemple de code suivant pour y parvenir, vous pouvez voir à quel point il est court :
location / {if ($ http_user_agent ~ * '(iPhone | iPod)') {réécrire ^. + http://m.example.com/$uri; }}}Comme nous le voyons dans le code, nous identifions l'agent du navigateur, s'il correspond à celui que nous avons désigné (dans ce cas iPhone ou iPod) nous faisons une réécriture, cela peut être fait aussi large ou spécifique que notre logique l'exige, pour le exemple, il est plus facile à comprendre avec une seule condition.
Comme nous pouvons le voir, il est assez facile d'identifier l'agent du navigateur et il est encore plus facile de l'utiliser en notre faveur, comme nous l'avons mentionné précédemment, nous devons avoir une idée claire de ce que nous voulons faire pour utiliser le outils et obtenir le bénéfice souhaité.
Pour conclure le didacticiel, indiquez qu'en utilisant un design réactif, vous obtiendrez que l'apparence de votre page Web s'adapte à l'écran des appareils sans autre complication.
