1448 sujets

Web Mobile et responsive web design

Bonjour à tous

Je me rends compte que cette page ne s'affiche pas correctement sur iPhone, alors que la simulation iPhone sur Chrome et FireFox est correcte.
On voit sur les images suivantes que l'image "déborde", ou plus exactement que la balise <figure> qui la contient ne prend pas la bonne taille, avec comme résultat un chevauchement du texte sur l'image.
Saisie d'écran sur iPhone/Safari:
upload/1488969809-48769-iphone.jpg

sur Chrome:
upload/1488969840-48769-chrome.jpg

sur FireFox:
upload/1488969885-48769-firefox.jpg

Pourriez vous me conseiller sur la façon de résoudre ce problème?

Merci de votre aide
Modifié par PapyJP (08 Mar 2017 - 22:08)
Bonjour,
vous pouvez rajouter dans le CSS et voir ce que cela donne :
img {
max-width: 100%;
height: auto;
}

C 'est sans garantit que cela marche Smiley cligne
Non seulement ça ne marche pas, mais ça donne un résultat inacceptable.
Vous pouvez voir ce que ça donne dans cette page de test

Le max-width de <img> est à 80vw, la balises <figure> est en display:inline-table, c'est à dire que ce n'est pas l'image qui dépend de la largeur de <figure>, mais au contraire c'est la balise <figure> qui est sensée "se mouler" autour de l'image.
Cela marche très bien, y compris sur iPad/Safari mais pas sur iPhone/Safari.
Il doit y avoir une différence subtile que je ne comprends pas.

Edit: si je mets l'iPhone en mode "horizontal", tout se passe correctement. Il doit s'agir d'une "anomalie" (expression politiquement correcte pour "bug") mais il serait bien de trouver un contournement, car inutile de compter sur le support Apple!
Modifié par PapyJP (08 Mar 2017 - 22:09)
Bonjour à tous
Au cas où ça vous intéresserait, je pense avoir trouvé le pourquoi de cette anomalie, et subséquemment l'avoir résolue.
La raison, c'est que la balise <figure class="diapo width40"> est agrémentée d'un CSS max-width:40%; alors que le "width40" s'adresse en fait à l'image qu'elle contient
De façon surprenante, les autres navigateurs ne semblent pas avoir pris cette directive en compte, contrairement à Safari/iPhone.
En modifiant le CSS j'ai obtenu un résultat conforme à mes attentes. upload/1489052524-48769-iphone2.png
Modifié par PapyJP (09 Mar 2017 - 10:42)
Meilleure solution