Demande #592
closedVersion mobile d'APRIL.org grâce aux Media Queries
100%
Description
Bonjour,
je vous propose une feuille de style CSS pour un affichage adapté sur mobiles (smartphones, pas WAP !) du site de l'APRIL.
Pour voir un test sur une version statique de la page d'accueil : http://vayssiere.fr/april/mobile/home/
- CSS: le bloc @media { } en PJ doit se trouver après les règles CSS existantes pour pouvoir modifier celles qui doivent être modifiées
- HTML: un élément
<meta name="viewport" content="width=device-width" />
doit être présent dans l'élément <head> sans quoi la condition "max-width: 640px" ne s'appliquera pas - (j'y avais pas pensé dans mon mail) vérifier que le compresseur/minifieur de CSS inclus dans Drupal comprend ce @media { /* */ } qui entoure des règles CSS valides
Une fois en place, il faudra tester les autres pages du site et corriger les problèmes d'affichage constatés (et dans l'état loggé également).
Voir également mon mail sur la liste siteweb le 24/07/11 à 14:38
Cordialement,
Philippe
Files
Updated by Frédéric Couchet over 13 years ago
- % Done changed from 60 to 80
Version mobile en place.
Processus suivi :
Création du fichier lsd:/etc/drupal/6/sites/default/themes/zen_april/mobile.css
Fichiers modifiés :
- lsd:/etc/drupal/6/sites/default/themes/zen_april/zen_april.info
pour ajouter
stylesheets[all][] = mobile.css
après
stylesheets[all][] = elements.css
- lsd:/etc/drupal/6/sites/default/themes/zen_april/page.tpl.php pour
ajouter
<?php print '<meta name="viewport" content="width=device-width" />'?>
L'objectif est de à rajouter absolument au début de chaque page HTML,
dans le <head> de chaque page :
<meta name="viewport" content="width=device-width" />
TODO : faire la même chose en version plus "propre"
Updated by Frédéric Couchet over 13 years ago
Message de Pierre Buyle (qui a mis en place la version 6 du site de l'April) :
page.tpl.php est le bon endroit pour ajouter du markup global \340 toutes
les pages. Mais c'est aussi faisable depuis la fonction
THEME_preprocess_page($variables) (donc dans le cas du th\350me april
dans april_preprocess_page($variables)) avec
$variables['head'] .= '<meta name="viewport" content="width=device-width" />';
Dans le fichier template.php
Updated by Frédéric Couchet over 2 years ago
- Status changed from Nouveau to Rejeté