CSS : Internet et les mobiles

Dans un passé encore récent un site devait s'afficher seulement sur un écran d'ordinateur de bureau voire sur un écran de PC portable.
Mais dans les deux cas la largeur de l'écran était supérieure à 900 pixels.
Et donc le plus souvent la largeur de chaque page du site (balise BODY ou #MAIN) était réglée sur 900 pixels.

Mais l'internet mobile c'est à dire la visite de sites avec de petits écrans (tablettes et smartphone) a connu un développement extraordinaire.
Qu'un site ne fonctionne plus (ou très mal) sur de petits écrans est inacceptable.

Trois solutions possibles

Première solution : plusieurs versions du site

A chaque version correspond une URL différente !
Un test initial côté client ou côté serveur détecte le type d'appareil et renvoie vers une adresse web différente en fonction du résultat du test.

Mais une version mobile du site présente des inconvénients. D'abord un problème de coût de développement et de maintenance (deux sites).
Cependant le framework JS et CSS jQuery Mobile est un outil très intéressant !

La problèmatique de la détection du type d'appareil utilisé par le visiteur est évoquée dans la deuxième partie de ce chapitre.
Dans la troisième partie de ce chapitre je traite par un exemple l'emploi du nouveau Framework de jQuery pour créer une version mobile d'un site.

Deuxième solution : créer une application

Une application est un programme développé spécifiquement pour différents systèmes (iOS, Android, WindowsPhone) et qui se télécharge et se référence au sein d'un "Store".
Il s'agit donc d'un progamme parfaitement adapté à l'ergonomie tactile et la taille d'écran des mobiles.
Mais naturellement le développement d'une application pour mobile a un coût non négligeable ...
De plus le contenu n'est pas indexable par un moteur de recherche web classique.

Une application mobile est développée avec le langage JAVA (rien à voir avec JavaScript).

Troisème solution : site responsive

La méthode du Responsive Web design est souvent la solution la plus simple à mettre en oeuvre et convient à la plupart des sites.
Cette solution est basée sur le CSS et plus précisément sur les media queries.

Attention, faut aussi empécher le "dezoomage" effectué par le navigateur du mobile. A cette fin il faut rajouter une instruction HTML de type meta.
Mais je n'en dis pas plus pour l'instant car la technologie du "Responsive Web Design" est traitée dans le chapitre suivant.

Détection du type d'appareil utilisé par l'internaute

La solution JavaScript

On teste non pas le type de terminal du visiteur mais la largeur de l'écran en pixels. Les mobiles ont moins de 900 pixels de large.
On peut donc imaginer le code suivant pour rediriger vers la version mobile d'un site :

	...
	if (screen.width < 900) 
		window.location ="mon_site_mobile.fr" ;
	...

On peut imaginer le code suivant pour changer la feuille de style externe :

	if (screen.width < 900) 
	{
		var lien =document.createElement('link');
		lien.href ="mobile.css"; 
		lien.rel ="stylesheet";
		document.querySelector('head').appendChild(lien); 
	}

On produit via le javaScript une instruction HTML basée sur la balise LINK !
Ici je modifie le DOM de la page ; insertion d'un nouveau HTML dans la partie HEAD.
Pour plus d'explications visitez le tuto "javaScript & jQuery" et plus précisément la page "Générer du HTML via JavaScript".

Vous allez me dire que JavaScript peut être désactivé.
Vous avez raison mais uniquement sur un PC (ordinateurs de bureau des entreprises) et jamais sur un mobile. Comme la version PC est la version par défaut, si le script n'est pas exécuté le visiteur reste sur cette version ou la page chargée reste reliée à la feuille de style pour PC.

La solution PHP

On teste le navigateur ou système d'exploitation utilisé par le terminal du visiteur. On peut imaginer le code suivant pour rediriger vers la version mobile du site :

<?php if(strstr($_SERVER["HTTP_USER_AGENT"], 'android')) {header('location : mon_site_mobile.fr') ;} ?>

Pour changer la feuille de style dans l'hypothèse d'un mobile on peut écrire :

<?php if(strstr($_SERVER["HTTP_USER_AGENT"], 'iphone')) { echo "<link href ='mobile.css' rel ='stylesheet' >";} ?>

Là encore c'est séduisant en théorie mais dans la pratique il y a tellement de modèles de terminaux mobiles que le code PHP devient vite très complexe.

Solution HTML ou CSS : les media queries

On ne cherche pas à connaître le type de terminal utilisé mais seulement la largeur en pixels de l'écran.
Solution qui n'autorise pas la redirection mais seulement l'application de règles de styles spécifiques.

Solution HTML :

<link rel="stylesheet" media="screen and (max-width: 899px)" href="mobile.css" />

Si le média est un écran dont la largeur ne dépasse pas 900px alors c'est la feuille de style "mobile.css" qui s'applique.
On dit que l'on utilise ici une media query dans l'attribut media de la balise LINK.

Solution CSS :

	@media screen and (max-width : 899px) { */ règles de style pour écran dont la largeur est inférieure à 900 pixels /* }

Ici on utilise une media query dans la feuille de style.
Les règles de style entre la paire d'accolades s'appliqueront uniquement si la largeur de l'écran du visiteur est inférieure à 900 pixels.

Les media queries sont développées dans le chapitre suivant du même tuto.
Vous trouverez en particulier de nombreuses astuces CSS pour rendre compatible un site avec de petits écrans : masquer certains éléments, replier certaines boîtes, jouer sur le plein écran, etc.

Media = handheld

Il ne faut surtout pas utiliser cette valeur (dans l'attribut media de la balise LINK ou dans le sélecteur CSS @media) pour tester le type d'appareil du visiteur !
En effet la plupart des mobiles actuels se considèrent comme "screen" et non pas comme "handheld" !

Réalisation d'une version mobile d'un site avec jQuery Mobile

Je vous redirige vers le chapitre consacré à ce fameux framework JS et CSS dans le tuto "Javascript & jQuery". jQuery Mobile
Retour menu