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 environ 13 ans. Mis à jour il y a presque 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

Formats disponibles : Atom PDF