Projet

Général

Profil

Actions
Copier le lien

Demande #592

fermé

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

Ajouté par Philippe Vayssière il y a plus de 13 ans. Mis à jour il y a plus de 2 ans.

Statut:
Rejeté
Priorité:
Faible
Assigné à:
-
Catégorie:
Amélioration du site
Version cible:
-
Début:
24/07/2011
Echéance:
% réalisé:

100%

Temps estimé:

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

Fichiers

MQ_april.org_v01.css (3,54 ko) MQ_april.org_v01.css bloc CSS media queries d'adaptation aux mobiles pour april.org v1 Philippe Vayssière, 24/07/2011 21:25
Actions
Copier le lien
 #1

Mis à jour par Frédéric Couchet il y a plus de 13 ans

  • % réalisé changé de 60 à 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
Copier le lien
 #2

Mis à jour par Frédéric Couchet il y a plus de 13 ans

  • % réalisé changé de 80 à 100
Actions
Copier le lien
 #3

Mis à jour par Frédéric Couchet il y a plus de 13 ans

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
Copier le lien
 #4

Mis à jour par Frédéric Couchet il y a plus de 2 ans

  • Statut changé de Nouveau à Rejeté
Actions
Copier le lien

Formats disponibles : Atom PDF