Comment ajouter une version pour mobile à un site web existant Adaptation d'une page aux mobiles

Plutôt que de créer une nouvelle page pour présenter Hong Kong sur les petits écrans, nous allons modifier un tout petit peu son code HTML et surtout ajouter des règles de styles spécifiques pour adapter le contenu de la page en fonction de la taille de la fenêtre.

Code HTML

La partie de l'en-tête comporte deux ajouts : la mise à l'échelle réelle de 100% et une fonction permettant d'afficher ou masquer le menu, pour les petits écrans.

Début du code HTML et en-tête de la page

<!DOCTYPE html>
<html>
<head>

 <meta charset="utf-8">
  <title>Hong Kong</title>

  <meta name="viewport" content="initial-scale=1.0"> (1)
  <link rel="stylesheet" href="style.css" />

  <script> (2)
    function menumobile() {
      bloc = document.getElementById("menu");
      if (bloc.className=="afficher")
            { bloc.className = "masquer"; }
      else { bloc.className = "afficher"; }
    }
  </script>

</head>

La balise meta (1) définit une échelle de 1 (réglage du zoom à 100% du viewport), ainsi le navigateur connaîtra la largeur réelle de fenêtre d'affichage. Comme nous l'avions vu, les écrans mobiles indiquent souvent une largeur d'écran supérieure à la réalité, pour capter l'ensemble d'une page web et la réduire avec un zoom arrière.

Sur les écrans de petite taille, la fonction JavaScript menumobile() (2) gérera l'accès au menu, qui sera affiché ou masqué par un clic sur un bouton Menu. Celui-ci appellera la fonction menumobile() qui récupère l'élément d'identifiant menu (donc la balise ul contenant le menu) pour lui attribuer la classe masquer, s'il est affiché, ou la classe afficher dans le cas contraire. C'est la feuille de styles qui se chargera de rendre le menu visible ou non, en fonction de sa classe.

En détail : Explication de la fonction JavaScript menumobile()
Cette fonction menumobile() effectue les opérations suivantes.

 La variable bloc est la balise <ul id="menu"> : c'est l'élément de la page repéré par l'identifiant menu, fourni par la fonction getElementById('menu'), qui cherche dans la page un élément d'identifiant donné, ici menu. Elle va servir pour le test et le changement de la classe CSS de ce bloc menu.

 Si cet élément a pour classe afficher, alors le menu est déjà déroulé, donc c'est la classe masquer qui lui est attribuée.

 Dans le cas contraire, le menu est masqué car sa classe est déjà égale à masquer ou il n'a pas encore de classe (état initial, lorsque le bouton Menu n'a jamais été cliqué), donc c'est la classe afficher qui est attribuée à cet élément.

Le contenu initial de la balise <body> est presque inchangé par rapport à sa version initiale, celle du chapitre précédent. Seule est ajoutée une balise <a> pour créer le bouton Menu sur les écrans de petite largeur.

Fin du code HTML et corps de la page

<body>
<div class="global"> (3)

  <header class="entete">
    <img src="hk-entete.jpg" alt="Hong Kong"> (4)
  </header>


  <nav class="blocmenu">
    <ul id="menu">
    <a href="#" id="menutitre" class="mobile"
      onclick="menumobile(); return false;">Menu</a>  (5)
      <li><a href="index.html">Présentation</a></li>
      <li><a href="histoire.html">Histoire</a></li>
      <li><a href="visites.html">Visites</a></li>
      <li><a href="specialites.html">Spécialités</a></li>
      <li><a href="shopping.html">Shopping</a></li>
      <li><a href="transports.html">Transports</a></li>
      <li><a href="contacts.html">Contacts</a></li>
    </ul>
  </nav>

  <section class="contenu"> (6)

  <article> (7)
    <h1>Modernité et tradition</h1>

 <h2>Autour d'un rocher</h2>
    <p>
      <img class="droite" src="hk1.jpg"
        alt="port de Hong Kong" />
      Paragraphe de texte...
    </p>
    <p>Paragraphe de texte... </p>

 <h2>Une vie bouillonnante</h2>
    <p>
      <img class="gauche" src="hk2.jpg"
        alt="rue de Hong Kong" />
      Paragraphe de texte...
    </p>
    <p>Paragraphe de texte...</p>
  </article>

  <aside> (8)
    <p><img src="hk-encart1.jpg" alt="carte"></p>
    <p><img src="hk-encart2.jpg" alt="vue générale"></p>
     <p><em>Images Wikimédia</em></p>
  </aside>

 </section> <!-- Fin du bloc section.contenu -->

  <footer class="pied">
    <p><img src="hk-dragon.jpg" alt="dragon" /></p>
  </footer>

</div> <!-- Fin du bloc div.global -->
</body>
</html>

Nous avons donc ajouté un lien (5) avant la balise ul qui contient le menu. Initialement masquée, cette balise a sera transformée en un bouton Menu sur les écrans de petites tailles, pour afficher ou masquer le menu de navigation. Sa classe mobile nous permettra en CSS de ne montrer ce bouton que sur les fenêtres de largeur inférieure à 640 pixels.

Un clic sur ce bouton appelle la fonction JavaScript menumobile() qui était venue compléter l'en-tête HTML. L'instruction return false; permet de désactiver le lien href="#" qui renvoie en haut de la page.

Dans la feuille de styles qui suit, nous adapterons, entre autres, la largeur du conteneur global (3) et de l'image d'en-tête (4). Dans la section du contenu (6), les colonnes article (7) et aside (8) s'adapteront à la fenêtre, soit en restant côte à côte, soit en se plaçant l'une sous l'autre.

Précédent
Suivant