1485 sujets

Web Mobile et responsive web design

Bonjour,

La configuration est une page pour ordinateur, dont le viewport provoque sur un petit écran tactile une réduction de l'ensemble, scalable à volonté.

Tout se met à l'échelle, sauf les éléments <span>. Ils me sont pourtant bien utiles sur navigateur d'ordinateur : une suite de <span> dont le contenu est "nowrap", se placent en effet, selon leur largeur, en retour à la ligne, ce qui me convient.

J'ai tenté pour tester ces éléments en utilisant des <div> et leur mise à l'échelle fonctionne alors parfaitement, mais deviennent bien sûr des élément block. Afficher ces <div> en display inline les fait retrouver le comportement de retour à la ligne si nécessaire, mais perdre aussi la capacité de mise à l'échelle.

C'est donc peut-être d'abord l'effet naturel du inline qui fait obstacle à la mise à l'échelle automatique.

S'il y a une solution, c'est peut-être dans l'usage d'une fonction CSS, ou bien d'une utilisation de display que j'ignore.

Quelqu'un aurait-il la solution, ou une piste de recherche ?

Merci d'avance et bonne journée.
Administrateur
Bonsoir,

Je ne suis pas sûr d'avoir compris le problème sans visuel, mais de tête les propriétés de césure et de wrap ne fonctionnent pas sur des éléments inline en effet.

Si tu ne souhaites pas avoir les inconvénients du block, as-tu pensé à tester inline-block ?
Bonjour Raphaël,

Merci pour cette piste. Ma description n'est pas suffisamment claire en effet.

Il s'agit de mise à l'échelle d'une page destinée aux navigateurs d'ordinateurs, affichée donc sur un petit écran de smartphone, dont les éléments sont bien recalculés dans les mêmes proportions que sur l'ordinateur, sauf une série d'éléments <span>. J'avais cru fixer le problème sur le fait que l'élément <span> est naturellement en display line. Mais c'est apparemment plus compliqué que cela.

Il va falloir que je creuse plus profond pour savoir où est le vrai problème.

Merci encore et bonne journée.

Et chapeau pour toutes les qualités de votre site.