HTML5 - CSS 2.x/3
PHP / MySQL
FORTH ...

HTML et Smartphones

Comme pré-requis, il nous faut une classe qui détecte si le média qui interroge le site web est installé sur un téléphone mobile.

La solution serait que le site sache s'adapter au média qui l'interroge. A ce titre, j'avais déja soumis une petite classe qui détectait l'interrogation par smartphone.

Ensuite, le sujet qui nous préoccupe est: comment faire pour que la page s'adapte toute seule, même si le client final (le gars qui tient le smartphone...) bascule par exemple du mode portrait en mode paysage et inversement.

Le premier réflexe: on crée une classe qui demande la résolution écran... Vous la connaissez cette classe? Moi non. Il existe bien des embryons pour ce genre de machin (y compris dans le Zend Framework dernier jus...). Trop lourd, trop complexe, doit être mis à jour en permanence. Hop, -> poubelle!

Le second réflexe: on scotche du javascript qui détecte la résolution écran. Ah c'est beau comme du Renoir, tordu quand même et pas toujours fiable.

Et enfin la meilleure solution - à mon sens - du bête et stupide CSS/HTML, simple, facile, pas cher. On utilise la classe citée précédemment qui détecte si on interroge la page depuis un tel mobile:

<?php if ($detect->isMobile()): ?>
    <link href="css/stylesMobile.css" rel="stylesheet" type="text/css">
<?php else: ?>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
<?php endif; ?>

Ici, si c'est un tel mobile, on sélectionnera le fichier stylesmobile.css.

N'ensuite de quoi, voici comment notre body en code HteumeuLeu va s'adapter automatiquement à la largeur écran choisie:

body {
    width: 95%;
    margin: auto; /* centrage automatique */
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 18pt;
    }

Et le iFoune va afficher le texte contenu dans notre page en ajustant les marges tout seul comme un grand. Testé avec succès également sur un smartPhone sous Androïd!

Ah que c'est beau la simplicité.

Voici un petit complément d'informations concernant l'affichage des pages HTML sur smartphones:

<?php if ($detect->isMobile()): ?>
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes">
<?php endif; ?>

Ces deux lignes de codes META sont indispensables pour indiquer au smartphone la manière dont les pages vont être gérées dans l'espace d'affichage, c'est à dire un écran aux dimensions très limitées.

Le premier META indique que l'on souhaite un affichage adapté aux smartphones.

Le second META indique que l'on souhaite compacter cet affichage à la largeur disponible. L'option user-scalable=yes permet néanmoins à l'utilisateur de zommer sur la page pour agrandir les caractères s'ils apparaissent trop petits à l'écran.

Si on sélectionne user-scalable=no, on ne pourra pas zoomer sur l'affichage, cas de la page d'accueil Google pour smartphones.

Tous les articles sur ce thème