Partage
  • Partager sur Facebook
  • Partager sur Twitter

Smartphone : taille du texte dans les <li>et <td>

Comment configurer la taille de ces éléments pour le smartphone ?

    21 juin 2021 à 17:22:13

     Bonjour,

    Nouvelle sur votre site : présentation

    Je suis nouvelle sur votre site.

    Pour me présenter vite fait :

    J’avais d’abord un site en Wordpress. Après avoir été piratée, j’ai appris – en autodidacte essentiellement – du HMTL et CSS. L’été dernier, j’ai remis un début de mon site en ligne https://www.differ-allemand.com, mais j’ai dû le délaisser à moitié terminé, par faute de temps. Cet été, j’ai de nouveau du temps. Je souhaite en profiter pour refaire le site : changer l’aspect graphique, revoir complètement l’organisation de mes feuilles CSS et résoudre des bogues. C’est ce dernier point qui m’amène sur votre forum, et j’espère que vous pourrez m’aider…

    Mon problème en bref

    J’ai un problème l’affichage de la taille des lettres dans les <li> et les <td> sur smartphone.

    Pour les <li> et les <td>, j’ai défini « font-size : 1rem », tout comme pour les <td>.

    Et pourtant, tandis que les <td> en dehors des <li> et des <td> ont une taille normale, le texte dans les <li> et les <td> apparaît minuscule.

    Pages de test

    J’ai fait des pages de test réduites plus ou moins aux éléments nécessaires pour tester le dimensionnement : j’ai donc supprimé les couleurs, les images et changé le texte. Par ailleurs, j’ai mis le CSS dans le <head> des deux pages test. (Normalement, je fais des feuilles de style séparées.)

    Dans mes deux pages test, j’ai mis la ligne suivante dans le header :

    meta name="viewport" main="width=device-width, initial-scale=1.0"

    Dans le body de ma page test 1 https://www.differ-allemand.com/DAtest.html, j’ai défini successivement le CSS pour les tailles d’écrans suivants :

    • smartphone
    • petit écran :
      @media only screen and (min-width: 30rem)
    • moyen écran :
      @media only screen and (min-width: 50rem)
    • large écran :
      @media only screen and (min-width: 70rem)

    Dans le body de ma page test 2 https://www.differ-allemand.com/testDA.html, j’ai défini successivement le CSS pour les tailles d’écrans suivants :

    • smartphone
    • petit écran :
      @media only screen and (min-device-width: 30rem)
    • moyen écran :
      @media only screen and (min-device-width: 50rem)
    • large écran :
      @media only screen and (min-device-width: 70rem)

    Affichage sur ordinateur

    La première page (DAtest) s’affiche à merveille sur l’écran de l’ordinateur. Si je rétrécis la page, le responsive design fonctionne comme prévu. Si vous souhaitez donc savoir quel résultat je souhaite sur smartphone, regardez cette page et en rétrécissez la largeur.

    La deuxième page (testDA) s’affiche également comme il faut sur l’écran de l’ordinateur tant que l’on n’en rétrécit pas la largeur.

    Affichage sur smartphone, position normale (verticale)

    • L’affichage des éléments du grid se fait comme souhaité sur la deuxième page (testDA).
    • Si je tiens le smartphone en position normale (verticale), les <li> s’affichent comme souhaités.
    • Par contre, les éléments <td> sont beaucoup trop petits.

    Affichage sur smartphone, position horizontale

    • L’affichage des éléments du grid se fait comme souhaité sur la deuxième page (testDA).
    • Par contre, si je tiens le smartphone en position normale (verticale), les <li> sont beaucoup trop petits. Quant à l’ombre des éléments, il y a des distorsions : les padding à gauche et à droite sont surdimensionnés.
    • Et les éléments <td> sont également beaucoup trop petits.

    Mes souhaits

    Vous êtes-il possible de dire comment faire pour que les <li> et les <td> se mettent à la bonne taille, s’il vous plaît ?

    J’ai déjà pensé à surdimensionner ces éléments pour les écrans > 30rem, mais cela ne résoudrait que le problème pour les écrans de smartphone en position verticale.

    Si je faisais le surdimensionnement jusqu’à > 50rem, cela résoudrait peut-être le problème pour les écrans de smartphone en position horizontale. Mais je ne sais pas ce que cela donnerait pour les tablettes. (Je n’en ai pas, je ne peux donc pas les tester.)

    Par ailleurs, avez-vous une idée comment s’affichent mes pages test sur iPhone ? (J’en n’ai pas non plus pour tester. Je n’ai qu’un Samsung Galaxy.)

    Pour finir, ce n’est pas la peine de faire des remarques à propos des liens d’images. (Je sais comment faire les liens. Je n’ai simplement pas pris le temps pour m’en occuper pour cette page test.)

    Merci d’avance pour votre aide.

    Bonne journée

    Ingrid

    • Partager sur Facebook
    • Partager sur Twitter
      22 juin 2021 à 19:39:57

      Bonjour,

      Je n'ai pas la solution à ton problème mais je souhaite apporter une solution pour t'aider à tester ton code sur toutes les résolutions d'écran.

      Si tu es sur Google Chrome il te suffit de:

      1. Clic droit puis Inspecter

      2- Cliquer sur la deuxième icône du menu (au dessus du code source): cela va faire apparaitre un affichage mobile de ton site web.

      3- En haut de cet écran tu as une liste déroulante permettant de tester des résolutions pré définis mais tu as aussi la possibilité de préciser des résolutions.

      -
      Edité par eclairia 22 juin 2021 à 19:41:01

      • Partager sur Facebook
      • Partager sur Twitter
      "Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain
        23 juin 2021 à 17:44:42

        Merci beaucoup !

        Pour ce qui concerne mon problème, il n'est pas encore résolu.

        Par contre, cette information est très utile pour moi en général, car pour le moment, je n'ai travaillé qu'avec l'inspecteur de Firefox. Et je ne savais pas que l'on peut simuler le smartphone aussi facilement :)

        • Partager sur Facebook
        • Partager sur Twitter

        Smartphone : taille du texte dans les <li>et <td>

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown