Help !!!

[Raza]

Bonjour,

étant le remplaçant d'un collègue sur un projet, j'ai un petit souci.
Le site internet qui a été effectué en joomla répond assez mal à l'iPhone 5, surtout pour faire déroulé ou défilé les pages du site en horizontal ou en vertical.

Quelqu'un aurait une idée de la provenance de ce bug et de comment la fixer?

Je vous remercie en avance

[jisse03]

Re : Help !!!

Bonjour,

et bienvenue sur le forum.

Avec un titre de sujet aussi peu explicite, il y a peu de chance que beaucoup lisent ce sujet.

Mais: le template utilisé est-il responsive ? Les media queries CSS sont-elles présentes ?

Sans savoir de quel template il s'agit, de sa configuration et d'un lien vers le site, il est impossible de deviner quoi que ce soit.

[Raza]

Re : Help !!!

Bonjour,

et bienvenue sur le forum.

Avec un titre de sujet aussi peu explicite, il y a peu de chance que beaucoup lisent ce sujet.

Mais: le template utilisé est-il responsive ? Les media queries CSS sont-elles présentes ?

Sans savoir de quel template il s'agit, de sa configuration et d'un lien vers le site, il est impossible de deviner quoi que ce soit.

Oui, c'est ma première fois sur un forum donc excusez-moi du manque de tact.
1. Le template du site est bel et bien responsive en trois points : ( Ecran normal - Tablette - Smartphone) 2. et se trouve ici: http://www.aupa.be/bureau-architectes-news.

Sur android, windows phone, iPhone4s etc… Le site répond très bien sauf sur iPhone5 le défilement horizontal n'est pas fluide.
Et les media queries CSS sont présentes.

Merci à vous encore

[jisse03]

Re : Help !!!

Si le template est fluide, qu'il répond bien partout SAUF avec un seul modèle, c'ets dans la version de iOS ou du Safari embarqué avec cette version qu'il faut chercher la cause. http://forums.macg.co/ios/ios-7-fluide-1230205.html semble indiquer que des problèmes surviennent avec certains builds iOS.

Je n'ai pas plus d'informations sur ce point, n'utilisant aucun iBidule Apple.

[Raza]

Re : Help !!!

Si le template est fluide, qu'il répond bien partout SAUF avec un seul modèle, c'ets dans la version de iOS ou du Safari embarqué avec cette version qu'il faut chercher la cause. http://forums.macg.co/ios/ios-7-fluide-1230205.html semble indiquer que des problèmes surviennent avec certains builds iOS.

Je n'ai pas plus d'informations sur ce point, n'utilisant aucun iBidule Apple.

Merci beaucoup,

[PhilJ]

Re : Help !!!

Bonjour,

Le template du site est bel et bien responsive en trois points : ( Ecran normal - Tablette - Smartphone)

...Le comportement du site n'en donne pas l'impression, du moins sur écran normal standard (1024 px ascenseur compris) et tablette iPad.

En premier lieu, on voit dans le template.css que la largeur par défaut est fixée à 1050px :

#conteneur { width : 1050px; }

Le site ne peut donc pas s'afficher correctement sur iPad 1024 px (mode paysage), non plus que sur un écran standard (largeur 1008 px hors ascenseur, type écran 4/3).


Plus précisément, l'inspection des CSS ne révèlent qu'une seule spécification media query :

@media only screen and (max-width:640px) { ... }

Autrement dit, l'arrangement est actuellement le suivant :
—

• Jusqu'à 640 px => tous les appareils mobiles, smartphones et tablettes.
  —
• Au-delà de 640 px => tous les autres écrans, y compris les tablettes 768 px, 800 px, 980 px, 1024 px, et tous les écrans larges au-delà.
  —

Cette seule division ne peut pas suffire à cibler précisément les principaux cas trouvés dans les intervalles.

Pour voir tout cela — sans iBidule — il suffit d'utiliser Firefox pour visiter le site, et plus précisément cette page, en utilisant le mode mobile : CTRL+MAJ+M. On voit nettement apparaître les soucis réels ou prévisibles sur iPad, notamment en mode portrait (768 px). On voit aussi ce qui se passe lorsque l'on diminue progressivement la largeur jusqu'à 640 px avant de passer en mode mobile tel que défini par la spécification media query ci-dessus évoquée.

De plus, un curieux ascenseur interne apparaît dans le site (= à l'intérieur du site). Y a-t-il une raison ? Peut-être est-ce l'origine de votre souci de scrolling ?


En résumé, (1°) la largeur de base est trop élevée (1050 px), et (2°) les intervalles définis pour les largeurs sont trop larges.

Suggestions :
—

1. Ramener #conteneur à 1008 px par défaut (quitte à permettre davantage lorsque la largeur de l'écran dépasse le standard 1024 grâce à des directives media queries pour les écrans larges). Même chose pour #topmenu, #footer, #userstop, #contenu, #FooterMenu et #FooterMenu2.
   —
2. Subdiviser le menu, dont les liens sont déjà en petits caractères (= définir un menu secondaire, par exemple au-dessus de l'existant).
   —
3. Subdiviser davantage les intervalles media queyries en tenant compte des standards. Par exemple, en se référant aux limites des standards Apple : jusqu'à 480 px, dans un seul media query ciblant les iPhones quelle que soit l'orientation (à moins qu'on ne préfère subdiviser selon les limites : 320 px et 480 px), puis 768 px, puis 1024 px. Une spécification supplémentaire pourrait également être ajoutée pour cibler les écrans larges (= les 16/9 les plus répandus aujourd'hui, en PC de bureau ou PC portables).

Cordialement,




PhilJ