Project

General

Profile

Actions
Copy link

Demande #592

closed

Version mobile d'APRIL.org grâce aux Media Queries

Added by Philippe Vayssière over 13 years ago. Updated over 2 years ago.

Status:
Rejeté
Priority:
Faible
Assignee:
-
Category:
Amélioration du site
Target version:
-
Start date:
07/24/2011
Due date:
% Done:

100%

Estimated time:

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/

Les conditions techniques de mise en place du bloc de règles @media sont les suivantes :
  • 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

MQ_april.org_v01.css (3.54 KB) MQ_april.org_v01.css bloc CSS media queries d'adaptation aux mobiles pour april.org v1 Philippe Vayssière, 07/24/2011 09:25 PM
Actions
Copy link
 #1

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 '&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; /&gt;'?>

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"

Actions
Copy link
 #2

Updated by Frédéric Couchet over 13 years ago

  • % Done changed from 80 to 100
Actions
Copy link
 #3

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

Actions
Copy link
 #4

Updated by Frédéric Couchet over 2 years ago

  • Status changed from Nouveau to Rejeté
Actions
Copy link

Also available in: Atom PDF