Détecter la plateforme du navigateur en Javascript
Accueil > Technique > Javascript > Javascript Astuces > Détecter la plateforme du navigateur en Javascript
Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :
Détecter la plateforme du navigateur Web
Nous débutons ici une grande série d'astuces sur le code Javascript. Et nous le verrons au fil de la progression, nous mettrons les librairies JQuery au service du code Javascript pour produire des résultats intéressants et des effets saisissants. Dans ce premier volet, nous débutons très simplement. L'astuce enseignée y est pourtant incontournable. L'enjeu consiste à détecter la plateforme de navigation de l'internaute connecté. En effet, depuis quelques années, pour garantir un référencement optimum, les sites Web doivent être responsive. Ils doivent adapter leur mise en page selon que l'internaute le consulte depuis un appareil mobile ou un ordinateur classique.
Sources Html et Css
Pour la démonstration de cette première astuce Javascript, nous proposons de nous appuyer sur des sources à récupérer. Elles vont permettre de bien comprendre la différence de traitement qu'il est nécessaire d'engager selon la plateforme de connexion.
- Télécharger le fichier compressé mobile-vs-ordinateur.rar en cliquant sur ce lien,
- Puis, le décompresser dans le dossier de votre choix,
- Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur par défaut,
Nous y trouvons une page d'accueil complètement épurée. C'est à l'intérieur du calque délimité par le cadre aux coins arrondis que nous allons coder quelques instructions Javascript à restituer à l'écran.
- A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
- Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,
...
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/mes-styles.css">
<link rel="stylesheet" href="css/les-styles.css">
<body>
...
Et précisément, cette mise en page doit s'adapter à la nature de l'appareil. La présentation ne peut pas être la même sur un mobile et sur un ordinateur.
La section qui nous intéresse est située plus bas dans le code, plus précisément dans le calque associé au style annonce.
...
<div id="conteneur">
<div id="contenu">
<!--
Implémentation
-->
<div class="annonce">
</div>
</div>
</div>
...
Les informations qu'il contiendra s'afficheront dans la cadre aux bords arrondis que nous avons découvert précédemment.
Questionner le navigateur
Javascript offre un objet bien précis pour interroger le navigateur du client connecté au site. Cet objet qui se nomme navigator propose une propriété pour connaître la nature de la plateforme.
- Dans le calque annonce, créer tout d'abord la section pour accueillir le code Javascript,
<div class="annonce">
<script type="text/javascript" language="javascript">
</script>
</div>
...
Désormais, pour adapter le comportement de la page Web en fonction de la plateforme, il est question de réaliser un test sur le système d'exploitation du navigateur, voire même un double test. En effet, les systèmes d'exploitation sont tout à fait particuliers pour un Iphone ainsi que pour tout autre smartphone, géré par le système Android. Si nous parvenons à les détecter, nous saurons que l'internaute ne navigue pas depuis un ordinateur de bureau.
- Dans la section de script, ajouter l'instruction conditionnelle suivante :
<div class="annonce">
<script type="text/javascript" language="javascript">
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/Android/i))
{
}
else
{
}
</script>
</div>
...
S'il s'agit d'un Iphone ou d'un système Android, nous prévoyons une branche de traitement pour les appareils mobiles. Dans le cas contraire (else), donc pour les ordinateurs, nous prévoyons une autre branche de traitement. C'est donc la propriété userAgent de l'objet Javascript navigator qui renseigne entre autres sur le nom du système d'exploitation. Et grâce à la méthode macth, nous cherchons à savoir si ce nom contient le terme iphone ou le terme Android. Le drapeau i permet de ne pas considérer la casse dans la recherche. Si cette méthode répond positivement, nous saurons que l'utilisateur navigue depuis un appareil mobile.
Pour l'instant, nous allons simplement nous contenter d'afficher des informations adaptées à la plateforme dans le calque annnonce.
- Dans la première branche, ajouter les deux lignes Javascript suivantes :
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/Android/i))
{
document.write("Vous naviguez depuis une plateforme mobile.");
document.write("<br />" + navigator.userAgent);
}
...
Nous exploitons simplement la méthode write de l'objet document pour afficher des informations dans le flux du document. A ce titre, nous en profitons pour retourner les informations fournies par le userAgent sur une seconde ligne.
Nous allons maintenant faire de même dans le cas d'une connexion établie depuis un ordinateur.
- Dans la seconde branche cette fois, ajouter les deux lignes Javascript suivantes :
else
{
document.write("Vous naviguez depuis un ordinateur.");
document.write("<br />" + navigator.userAgent);
}
...
D'ailleurs, puisque la ligne de code questionnant le userAgent est identique dans les deux cas, nous aurions dû la sortir de l'instruction conditionnelle pour la placer dans une portion de code commune.
Mais qu'à cela ne tienne, ici seule la démonstration compte et une fois n'est pas coutume, tant pis pour l'optimisation du code Javascript.
- Enregistrer les modifications (CTRL + S) et basculer sur le navigateur (ALT + Tab),
- Rafraîchir la page Web avec la touche F5 du clavier,
Comme vous pouvez le voir, l'ordinateur est reconnu. Les informations sont de plus retournées notamment sur le système d'exploitation (Windows NT 10).
Maintenant, si vous affichez la page depuis un appareil mobile grâce par exemple à l'émulateur Opera Mobile Emulator, vous constatez que les informations retournées ne sont pas les mêmes. Le nom Androïd figure bien dans l'intitulé du système d'exploitation.
Mais ce n'est pas tout. La page Web apparaît totalement déstructurée. Sa mise en page n'est tout simplement pas adaptée à un appareil mobile. Et c'est un défaut que nous allons pouvoir corriger grâce à cette capacité qu'à le code Javascript à détecter la plateforme.
Adapter les styles à la plateforme
La solution consiste à déclarer des feuilles de styles différentes d'une plateforme à une autre.
- A la racine du dossier de décompression, double cliquer sur le sous dossier Css,
- Cliquer droit sur le fichier les-styles.css,
- Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,
- Faire de même pour éditer le fichier les-styles-mobile.css,
Version ordinateur :
.annonce
{
width:800px;
margin:auto;
margin-top:50px;
font-size:20px;
color:#2b579a;
}
Version appareil mobile :
.annonce
{
margin:auto;
margin-top:50px;
font-size:16px;
color:#2b579a;
}
Mais ces deux styles se démarquent sur un réglage particulier qui fait toute la différence. Bien sûr, les tailles de police sont adaptées. Mais sur la version ordinateur, une largeur fixe de 800 pixels contraint les dimensions du calque. C'est lui qui provoque cette déstructuration sur un affichage SmartPhone. Et comme vous pouvez le voir, ce réglage disparaît sur la version mobile de ce fichier Css. Le paramétrage margin:auto lui impose simplement d'occuper tout l'espace disponible.
Maintenant, tout l'enjeu consiste donc à pouvoir adapter la déclaration de la feuille de styles au chargement de la page Web.
- Revenir dans le code de la page Html,
- Dans l'entête, remplacer la déclarative de la feuille les-styles.css par le code Javascript suivant :
<link rel="stylesheet" href="css/mes-styles.css">
<script type="text/javascript" language="javascript">
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/Android/i))
{
document.write("<link rel='stylesheet' href='css/les-styles-mobile.css'>");
}
else
{
document.write("<link rel='stylesheet' href='css/les-styles.css'>");
}
</script>
<body>
...
Nous exploitons donc la même double condition que précédemment afin de détecter la plateforme utilisée par l'internaute. Mais cette fois, nous ne déclarons pas la même feuille de styles selon le matériel afin d'adapter dynamiquement les réglages de mise en page.
Fort naturellement, si vous actualisez le navigateur de l'ordinateur, vous ne notez aucune différence. C'est toujours la même feuille de styles qui est utilisée. Par contre, si vous actualisez le navigateur de l'appareil mobile, vous constatez que tout rentre dans l'ordre.
La feuille de styles a été interchangée pour adapter la mise en page à la plateforme.
Sur Facebook
Sur Youtube
Les livres
Contact
Mentions légales
