web-dev-qa-db-fra.com

Taille de police incohérente sur le téléphone intelligent

Je peaufine une page Web pour qu'elle soit belle sur les téléphones intelligents. J'ai déclaré une section @media dans le fichier CSS afin de pouvoir spécifier les tailles de police de cette page. Voici cette section média:

@media screen and (max-device-width: 640px) {
    #TermsOfUse {
        padding: 0 2em 0 2em;
        margin-left: auto;
        margin-right: auto;
        color: #777;
        font: small sans-serif;
    }

    #TermsOfUse p {
        color: #777;
        font-weight: bold;
        font: small sans-serif;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    #TermsOfUse #trademark_footer p {
        font: xx-large sans-serif;
    }
}

Cependant, les tailles de police apparaissent de manière incohérente. Je lui ai dit de montrer les polices "petites", mais une section continue d'afficher les polices dans une taille beaucoup plus petite (id = "trademark_footer" en bas). L'utilisation de "xx-large" ne rend même pas la police aussi grande que la "petite" police dans le reste de la page. Je visualise la page dans Chrome sur Android.

De plus, lorsque je visualise cette page dans le simulateur suivant, toutes les polices de la page entière sont minuscules - beaucoup trop petites pour être lues.

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy

Premièrement, pourquoi la police figurant dans la marque au bas de la page est-elle tellement plus petite que celle du reste de la page (Chrome sur Android)?

Deuxièmement, pourquoi toutes les polices sont-elles si petites dans le simulateur iPhone?

Tout ce que j'essaie d'accomplir est d'afficher toutes les polices dans une taille lisible sur tous les téléphones intelligents.

METTRE À JOUR:

Lorsque je spécifie explicitement les tailles de police, j'ai le même problème. Si je spécifie par exemple 13px pour la police principale, je dois spécifier quelque chose autour de 30px sur la marque pour que celle-ci apparaisse à une taille similaire.

Même chose si j'utilise "em" s.

METTRE À JOUR:

Je viens de le tester dans le navigateur par défaut (je pense) de mon Samsung Galaxy S2, ce qui montre également la toute petite police, si petite qu'elle est illisible. En passant, dans le navigateur par défaut d'Adroid, je peux taper deux fois et la taille est agrandie.

J'ai essayé et ça n'a pas semblé faire la différence:

body {
    -webkit-text-size-adjust: none;
}
cssmedia-queriesfont-sizesmartphone
23
birdus

J'ai jeté un coup d'œil à la source de cette page et je ne pouvais pas voir le 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 

Lorsque j'ai regardé sur mon iphone, la page ne semblait pas du tout redimensionnée, ce qui laisse supposer que l'appareil interprète la taille de la page et qu'aucune des requêtes multimédia ne prendra effet.

L'ajout de la balise méta de la fenêtre d'affichage devrait déclencher les requêtes sur les médias et les modifications de police recherchées.

info sur la balise viewport

52
Duncan Beattie

C'est un long plan mais cela peut vous aider un peu.

J'ai ouvert http://inrix.com/traffic/Privacy avec un iPhone4 (iOS 5.0.1) et la police est vraiment petite.

Jetez un coup d'œil à ce page 's @medias (vous pouvez également voir le modèle Boilerplate de HTML5 vous pourrez peut-être aussi creuser quelque chose à partir de votre problème). Je n’ai aucun problème de taille de police et j’ai testé le lien précédent sur Chrome (version 26.0.1410.64 m), iOS 5.0.1 (9A405) et Android 2.3.6 avec les deux orientations (dans le Téléphones). Peut-être que vous pourriez creuser quelque chose à partir de ces @medias.

Je suis tout à fait d'accord avec la réponse de VectorYou should specify sizes when you want consistency, évitez les noms lorsque vous souhaitez une cohérence.

Enfin, voici quelques liens pour plus d’informations:

Enfin, vous pouvez télécharger et incorporer une police dans votre css:

@font-face { 
    font-family: 'LiberationMonoRegular';
    src: url('fonts/LiberationMono-Regular-webfont.woff') format('woff'),
         url('fonts/LiberationMono-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; }

Ensuite, dans vos réinitialisations, utilisez simplement votre police:

* { padding: 0; margin: 0; font-family: "LiberationMonoRegular", Verdana, Tahoma; }

J'espère que ça aide!

1
Esteban

Qu'en est-il de définir une hauteur de ligne?

J'ai eu le même problème avec différents navigateurs Web: les polices avaient des positions différentes. Je pourrais résoudre ce problème en définissant une height et line-height.

0
bonny