Discussion :

[Ethan.O]

Bonjour,
Je suis plutôt novice dans la programmation web et j'ai un problème de compatibilité de mon site (programmé manuellement), il fonctionne parfaitement bien sur mobile comme sur PC à une exception près : le cas d'un mobile sur firefox

En effet dans cet unique cas, la police devient extrêmement petite et illisible. J'ai déjà fouillé le Web à la recherche d'une réponse mais je n'ai rien trouvé.

La seule piste que j'ai est de changer les paramètres de police du navigateur mobile en activant la fonction "utiliser la taille de la police du système"

Même en préfixant la propriété de police pour mozilla je n'ai aucun changement.

Je ne sais plus quoi essayer alors je vous demande si vous avez la solution, voici l'adresse du site : hcsm41.fr

Merci d'avance :-)

PS : Le passage en version mobile est géré par une règle de mediaqueries.

[Invité]

Bonjour,

Accueil.css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
li {
    font-size: 9px;
}
...
p {
    font-size: 9px;
}

Comme unité de font-size, je te conseille plutôt les em (1em) ou % (100%).

[NoSmoking]

Bonjour,
ne pas oublier, également, de mettre :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta name="viewport" content="width=device-width, initial-scale=1.0">

dans l'entête de la page.

[Ethan.O]

Merci beaucoup pour vos réponses rapides. L'unité em m'était inconnu, quelle est la différence avec l'utilisation de px ? Pourquoi est-ce préférable de l'utiliser ?
Pour le meta à ajouter je l'ai testé et il ne change rien par rapport au site web PC en revanche pour le site web mobile c'est un changement majeur, je pense qu'il solutionne les divers bidouillage d'augmentation de polices que j'ai fait sans comprendre lors de la programmation du site ; je vais donc reprendre toutes les tailles de police depuis le début pour la version mobile car firefox affiche apparemment bien mieux ma taille de police avec cette ligne de code.
Encore merci,
Bonne soirée et bonnes fêtes,

PS : Je vais réadapter la police au plus vite, je vous tiendrai informé si cela solutionne totalement mon problème.

[Declique69]

Merci beaucoup pour vos réponses rapides. L'unité em m'était inconnu, quelle est la différence avec l'utilisation de px ? Pourquoi est-ce préférable de l'utiliser ?

Le px (pixel) est une unité absolue. Si toutes les tailles sont en pixels, il faut toutes les modifier pour agrandir les caractères d'une page.
Le em est une unité relative par rapport à la taille des caractères de l'élément parent : 2em veut dire des caractères deux fois plus grands que ceux du parent.

Jette un oeil sur les unités en CSS il est indispensable de bien les connaître pour faire du responsive sans trop se casser la tête.

[Ethan.O]

Merci beaucoup, je n'avais jamais pensé que les unités puissent être un sujet important pour progresser, je penserai à regarder ça plus en détail, merci beaucoup pour ton explication claire.
Bonne journée et bonnes fêtes !