mardi 7 Déc 2010

Activer le style mobile en Javascript

CSSDans l'article précédent, je vous ai montré comment détecter les téléphones mobiles en PHP d'une manière simple et qui prenne un minimum de ressources.

Pour rester le plus accessible possible, il est bien de laisser le choix aux visiteurs d'utiliser la version mobile ou normale de votre site Web. Il est possible de gérer cela en PHP avec un cookie de session qui gardera les préférences du visiteur. Je trouve que gérer ce changement en Javascript a plusieurs avantages:

  1. la rapidité: le changement est instantané et évite tout rechargement de page,
  2. l'économie de bande passante: aucun transfert supplémentaire n'est nécessaire,
  3. aucun cookie n'est placé si le visiteur ne change pas volontairement de style,
  4. c'est plus rigolo.

~

C'est la méthode que j'ai implémenté sur ce blog. Le lien vers la version mobile n'est pas idéalement placé, le mieux est de le mettre en haut à gauche, là où un téléphone portable l'affichera dès l'ouverture du site.

En cliquant dessus, cela change de CSS en Javascript. Le CSS mobile place ce texte "version mobile" en haut à droite pour qu'on comprenne qu'on est sur la version mobile. Car ceux qui arrivent avec un mobile utilise ce style CSS dès leur arrivée. Le lien n'est là que pour permettre un changement de version à ceux qui le souhaiteraient. :-)

~

Pour être précis, dans ma version mobile, il n'y a aucun changement HTML, seul un style CSS plus adapté aux mobiles est rajouté: pas de position absolue pour les colonnes latérales, elles sont à la fin dans toute la largeur de l'écran, les onglets se retrouvent verticaux pour que le site soit disposé tout en hauteur. Il peut ainsi être lisible sur un écran de seulement 200 pixels de large, mais avec une page bien plus longue.

Comment procéder

En HTML il faut indiquer un CSS alternatif. Opera ou Firefox permettent de changer de style, mais ces menus sont peu visibles et peu connus, donc le Javascript est tout de même utile pour eux.

<?php
$mobile = détection_mobile();
?>
 
<link rel="<? if ($mobile == false) echo 'alternate '; ?>stylesheet" type="text/css" href="style/mobile.css" media="screen" title="Mobile" id="mobile" />
 
<?
if ($mobile == true)
  echo '<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=0.25" />';
?>

Le style mobile est envoyé par défaut aux mobiles comme le principal. Quelque part dans les pages, ce faux lien en Javascript permet d'activer/désactiver ce style secondaire:

<span onclick="javascript: styleMobile();" title="Basculer style bureau/portable">Version mobile</span>

Et dans le Javascript, la fonction suivante permet de basculer d'un style à l'autre:

function styleMobile()
{
	l = document.getElementById("mobile");
	/* Il s'agit de la balise link du style CSS. */
	if (l.disabled == true)
		l.disabled = false;
	else
		l.disabled = true;
}

~

Comme toujours sur Azur Dev, ceci n'est qu'une inspiration pour d'autres développeurs. Ce n'est ni un tutoriel, ni un code à copier-coller bêtement! ;-) Vous pouvez voir le résultat ici même avec le faux-lien "Version mobile" dans la colonne gauche.


MàJ: Aujourd'hui, l'apparition des requêtes médias dans CSS 3 qui permettent d'adapter le CSS à la taille de l'écran, rend un peu obsolète de créer 2 fichiers de style. Il vaut mieux adapter le CSS principal à tous les formats, ce que je fais désormais sur ce site et d'autres.


café Cet article vous a aidé? 
Offrez-moi un café!
Agrégateur informatique

Une réponse à “Activer le style mobile en Javascript”

  1. Rétrolien de Détection des mobiles, un meilleur code PHP! - HTML & CSS - Azur Dev

Laisser un commentaire

Azur Dev