Les éléments du site web et les polices de caractères sont trop petits dans les mobiles

Je viens de terminer la conception et de codage de mon nouveau projet. Mais j'en ai besoin pour bien fonctionner dans des mobiles. J'ai redimensionné mon écran à quelque chose comme 350~400px de largeur et a commencé le codage et l'ajout de certains media-queries pour elle. Regarde grand dans redimensionné les navigateurs. J'ai coupé à certains éléments et caractéristiques, et tout allait bien... jusqu'à ce que je l'ai testé avec mon smartphone

L'écran n'est pas grand. Moins de 4' (probablement 3.5). J'ai mis des alertes sur le code et réalisé sa largeur était de 980px. Presque 3 fois plus grand que mes tests sur redimensionnée navigateurs.

Tout est tout simplement trop petit. D'autres choses sont grands: les media queries sont de travail, les coupes que j'ai fait dans le code sont ok aussi, mais vous pouvez à peine voir le contenu de mon mobile. Ce n'est certainement pas ce que je voulais.

Je veux qu'il ressemble à un Application et en effet il ressemble à une application sur le redimensionnée navigateur.

Comment pouvez-vous créer vos sites sensibles face à des problèmes comme celui-ci?

J'ai lu quelque chose sur l'utilisation de EM (et il y a quelque chose de nouveau appelé REM) parts mais je suis encore très confus à ce sujet. Dois-je changer TOUS les px à em?

Et je sais aussi que vous pouvez définir le font-size dans le html ou body balises et tous les autres éléments en hérite. C'est qu'une approche? Que faites-vous habituellement? Est-il un truc ou quelque chose? Je ne suis pas en utilisant bootstrap, ni aucun autre frontal cadre

  • appliquer une taille de police de votre corps à l'aide de media query est une bonne approche.
  • tu veux dire une taille de police combinée avec em unités?
  • appliquer une taille de police en pourcentage de votre corps
  • mais ce que sur les largeurs et les hauteurs des autres éléments?
InformationsquelleAutor Victor Ferreira | 2015-01-09
  1. 58

    Vous pouvez essayer d'ajouter de la viewport <meta> tag :

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

    À l'aide de la fenêtre d'affichage de la balise meta à la gestion de l'affichage sur les navigateurs mobiles

    • seront chrome comprendre viewport? comment ça fonctionne dans les navigateurs de bureau? font-ils l'ignorer?
    • Le navigateur mobile devrait savoir comment interpréter la balise meta(w3schools.com/tags/tag_meta.asp)
    • ive fait un essai et ça a fonctionné. je suis juste avoir quelques problèmes avec des parchemins (sur l'axe des x)
    • Cette solution rend mes images plus floues. Il serait agréable d'avoir une solution qui conserve la netteté de l'image que j'ai sans cette balise meta.
    InformationsquelleAutor Spock
  2. 1

    Utiliser des requêtes de média (Lien) et les pourcentages (%), 16px (taille de police par défaut) = 100%. J'espère que cela aide.

    • html {font-size:16px;} est le standard de facto, mais ne sont pas garantis pour être vrai, peut être modifié par l'utilisateur des feuilles de style.
    InformationsquelleAutor mainronindeveloper