[RÉGLÉ] Site responsive probléme affichage iPhone 6

[Boscaro]

Bonjour à tous et bonne année !
Je rencontre un soucis d'affichage sur iPhone 6 de mon site :

https://www.marianneoptique.com

En effet le comportement reponsive sur iPad, iPhone 4, IBook, PC tout est OK
mais sur iPhone 6 voilà le résultat :

alors que sur iPhone 4 c'est OK :

Pour info je précise que mon template a été créé avec Template Creator.
Par avance merci pour votre aide.

[manu93fr]

Re : Site responsive probléme affichage iPhone 6

Bonjour,
il y a bien un souci de compatibilité
tu as deja ce soucis sur Iphone5

[Boscaro]

Re : Site responsive probléme affichage iPhone 6

Bonjour,
il y a bien un souci de compatibilité
tu as deja ce soucis sur Iphone5

Je n'ai pas eu de retour avec iPhone 5

[PhilJ]

Re : Site responsive probléme affichage iPhone 6

Bonjour,

il y a bien un souci de compatibilité
tu as deja ce soucis sur Iphone5

Il est difficile d'en être sûr, car le fichier robots.txt bloque de nombreuses ressources : selon les essais, Google dit qu'il rencontre entre 13 et 17 ressources bloquées par le fichier robots.txt.

Donc la première chose à faire est de débloquer ces ressources. Pour cela, cliquez sur le lien 'Voir les ressources' dans les résultats de https://www.google.com/webmasters/to...riendly/?hl=fr, puis notez les ressources bloquées. Il restera ensuite à intervenir dans le robots.txt pour les débloquer une à une (ou bien en « libérant » des dossiers entiers, selon le cas), puis à refaire le test.

_________________

Concernant la capture d'écran de l'iPhone 6 : là aussi ce n'est peut-être pas significatif. En effet, si ce site a déjà été accédé avec cet appareil précisément, notamment en cours de développement, il est assez probable que ce qui est visionné soit en fait un état ancien de la page visitée. Donc il convient de vider le cache du navigateur — ou bien d'utiliser un navigateur alternatif n'ayant jamais visité le site.

NB : ce qui va dans ce sens, c'est qu'en appuyant sur F12 avec Chrome pour Windows, l'affichage (du moins de la page d'accueil) avec Device = 'iPhone 6' est tout à fait normal.


Cordialement,




PhilJ

[manu93fr]

Re : Site responsive probléme affichage iPhone 6

@PhilJ
je n'ai pas visiter son site avant et quand je "teste" un site en responsive, je le regarde directement dans les devices, ici sur Iphone ou d'autre dès que j'en ai l'occasion ... je confirme donc bien son problème sur iphone 5 et 6 (et surement d'autres)

@Boscaro
tu as construit ton template avec quelle version de template creator ?

[Boscaro]

Re : Site responsive probléme affichage iPhone 6

Bonsoir à tous et merci pour votre aide,
pour info je viens de faire d'appliquer la dernière MAJ de Template Creator CK qui est maintenant en Version 3.4.7 sur mon site en local.
J'ai installé également la MAJ sur le site en ligne Idem > même problème sur iPhone 6 et aucun sur iPhone 4,
par contre j'ai remarqué que sur l'affichage de la la page qui correspond a l'onglet "mon équipe"

http://marianneoptique.com/mon-equipe.html

l'affichage est OK. Bizarre ...

[ced1870]

Re : Site responsive probléme affichage iPhone 6

salut

ur l'affichage de la la page qui correspond a l'onglet "mon équipe"

http://marianneoptique.com/mon-equipe.html

l'affichage est OK

ça veut simplement dire que tu as un truc sur ta page qui te crée un conflit à quelque part. Essaies de dépublier modules et plugins afin de trouver le coupable ...
CEd

[Boscaro]

Re : Site responsive probléme affichage iPhone 6

salut

ça veut simplement dire que tu as un truc sur ta page qui te crée un conflit à quelque part. Essaies de dépublier modules et plugins afin de trouver le coupable ...
CEd

Bonjour,
J'ai dépublié modules & plugins un à un : rien n'a changé, j'ai supprimer également l'image en fond de page dans Template Creator rien n'y fait.
C'est vraiment incompréhensible surtout que comme je l'ai déjà dit sur iPhone 4 et iPad tout se place correctement dans la page.

[ced1870]

Re : Site responsive probléme affichage iPhone 6

en verifiant, ton souci est visible sur PC également, il suffit de jeter un oeil à la barre de défilement en bas
ton souci vient du code de ton article

<p style="margin-left: 870px; text-align: left;"> </p>

il faut virer ce truc ...
CEd

[Boscaro]

Re : Site responsive probléme affichage iPhone 6

Bonsoir CEd,
j'ai bien cru que tu avais trouvé le problème, en effet cette ligne ne sert à rien et je l'ai donc enlevée, malheureusement cela ne change rien au problème.
Bonne nuit, je continuerai de chercher demain.

[PhilJ]

Bonjour,


Deux autres erreurs repérées :
—

1. La ligne suivante visible dans le code source des pages ne peut que provoquer une erreur, car la police Arial n'est pas disponible dans Google Fonts :
   —
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=arial" type="text/css" />
   —
2. La ligne suivante doit pouvoir tenir sous iPhone 6 S, pas tout à fait sous iPhone 6, mais elle ne peut pas du tout tenir, du moins telle quelle, sous iPhone 4 ou 5 :
   —
   J’aime - Partager - Inscription pour voir ce que vos amis aiment.
   ——
   Le problème vient de ce que cette zone se trouve dans un container dont la largeur est très excessive pour tenir dans un smartphone (700 px).

____________________

Ces deux défauts ne devraient pas être bien difficiles à corriger.

Pour le reste, je me permets de renouveler mon conseil : utilisez Chrome ou Firefox avec votre PC.
—

• Sous Firefox, regardez le site en vue adaptative / mobile (sous Windows = CTRL+MAJ+M, sous IOS = Cmd+Option+M) et forcez la largeur à 375 px (iPhone 6). Documentation : https://developer.mozilla.org/fr/doc...Vue_adaptative.
  —
• Chrome propose quant à lui explicitement une vue iPhone 6 (sous Windows = touche F12, puis cliquez l'icône symbolisant un smartphone). Documentation : https://developers.google.com/web/to...te/device-mode (en anglais).

Voici par exemple ce que Firefox (Windows) montre en mode pour un écran iPhone 6 (375 x 627 px) :



Comme vous pouvez voir, on est loin de la copie d'écran aberrante de votre premier message, et ceci confirme encore que le cache de votre iPhone 6 est en défaut, ou même que le navigateur (lequel ?) se prend les pieds dans le tapis (avez-vous essayé avec un autre navigateur ?).

Concernant le test Google mobile, le souci est toujours votre fichier robots.txt, qui empêche le test d'aller à son terme. Les ressources à débloquer dans le robots.txt pour que le test soit significatif sont les suivantes :
—

/plugins/system/maximenuckmobile/themes/default/maximenuckmobile.css
/plugins/system/jcemediabox/css/jcemediabox.css?0f4b05d31d948a43ed0927f64f899f2a
/plugins/system/jcemediabox/themes/light/css/style.css?6515a211e792220aa59f68ea320e35bc
/modules/mod_maximenuck/themes/default/css/maximenuck.php?monid=maximenuck223
/modules/mod_maximenuck/assets/maximenuresponsiveck.css
/plugins/system/edsanimate/assets/animate.css
/plugins/system/fmalertcookies/assets/css/bootstrap.min.css
/plugins/system/fmalertcookies/assets/css/custom.css
/plugins/system/maximenuckmobile/assets/maximenuckmobile.js
/plugins/system/jcemediabox/js/jcemediabox.js?01f6bb1635ffb37306d7b368d146f889
/modules/mod_maximenuck/assets/maximenuck.js
/modules/mod_maximenuck/assets/fancymenuck.js /plugins/system/edsanimate/assets/viewportchecker.js
/plugins/system/edsanimate/assets/edsanimate.js">/…animate.js /plugins/system/imageeffectck/assets/imageeffectck.css
/plugins/system/imageeffectck/assets/imageeffectck.js
/plugins/nextendsliderwidgetshadow/shadow/shadow/shadow/Curved-Dark.png

Bonne journée,



PhilJ


—

[manu93fr]

Re : Site responsive probléme affichage iPhone 6

Comme vous pouvez voir, on est loin de la copie d'écran aberrante de votre premier message, et ceci confirme encore que le cache de votre iPhone 6 est en défaut, ou même que le navigateur (lequel ?) se prend les pieds dans le tapis (avez-vous essayé avec un autre navigateur ?).

@PhilJ
Si je regarde son site dans Firefox en mode compatibilité smartphone tout va bien
Si je le regarde d'un Iphone 5 ou 6 ... j'ai pris celui d'un collègue exprès ... là j'ai bien un decalage enorme comme sur son image

Ya donc un soucis ... c'est sur

[Boscaro]

Re : Site responsive probléme affichage iPhone 6

Bonjour à tous,
le problème a été trouvé (merci PhilJ) il s'agissait de cette ligne ci-dessous et de sa largeur en px (700)

2. La ligne suivante doit pouvoir tenir sous iPhone 6 S, pas tout à fait sous iPhone 6, mais elle ne peut pas du tout tenir, du moins telle quelle, sous iPhone 4 ou 5 :
J’aime - Partager - Inscription pour voir ce que vos amis aiment.
Le problème vient de ce que cette zone se trouve dans un container dont la largeur est très excessive pour tenir dans un smartphone (700 px).

Ci-dessous en image la solution apportée :

avec button_count activé au lieu de standard et 100% en largeur au lieu de 700px.
Encore un grand merci à tous pour votre aide

[PhilJ]

Re : Site responsive probléme affichage iPhone 6

le problème a été trouvé

Il vous reste à intervenir sur le fichier robots.txt situé dans le dossier racine de votre site afin de débloquer les fichiers et / ou dossiers inaccessibles à Google — du moins si vous voulez que votre site soit positionné au mieux chez Google dans les SERP des appareils mobiles. En effet, pour le moment, ce n'est pas le cas, et votre site n'est pas signalé par Google comme « Site compatible mobile » dans les SERP des smartphones.

A ce sujet, je pense qu'il y a une erreur dans le listing que je vous ai transmis (http://forum.joomla.fr/showthread.ph...=1#post1086012).

Ce n'est pas :

/viewportchecker.js

mais :

/plugins/system/edsanimate/assets/viewportchecker.js

Bonne continuation,

[Boscaro]

Re : Site responsive probléme affichage iPhone 6

Bonsoir,
concernant l'intervention sur le fichier robots.txt je n'ai aucune idée de la manip.
J'ai trouvé ça sur le net:

http://www.betterliving.be/blog/debloquer-l-acces-a-vos-ressources-joomla-pour-googlebot/en-pratique.html

Pouvez-vous me dire SVP si cette manip est fiable ?
Par avance merci