Les éléments et la police du site Web sont trop petits dans les mobiles
Je viens de terminer la conception et le codage de mon nouveau projet. Mais j'en ai besoin pour bien fonctionner sur les mobiles. J'ai redimensionné mon écran à quelque chose comme une largeur de 350 à 400 pixels et j'ai commencé à coder et à y ajouter des requêtes multimédias. A fière allure dans les navigateurs redimensionnés. J'ai coupé quelques éléments et fonctionnalités et tout allait bien ... jusqu'à ce que je le teste avec mon smartphone
L'écran n'est pas grand. Moins de 4 '(probablement 3,5). J'ai mis quelques alertes dans le code et j'ai réalisé que sa largeur était de 980 pixels. Presque 3 fois plus gros que mes tests sur des navigateurs redimensionnés.
Tout est trop petit. D'autres choses sont excellentes: les requêtes médiatiques fonctionnent, les coupes que j'ai faites dans le code sont correctes aussi, mais vous pouvez à peine voir le contenu dans mon mobile. Ce n'est certainement pas ce que je voulais.
Je veux qu'il ressemble à une App et en effet il ressemble à une application sur le navigateur redimensionné.
Comment créez-vous vos sites Web réactifs pour faire face à des problèmes comme celui-ci?
J'ai lu quelque chose sur l'utilisation des unités EM (et il y a quelque chose de nouveau appelé REM) mais je suis toujours très confus à ce sujet. Dois-je changer TOUS les px en em?
Et je sais aussi que vous pouvez définir le font-size dans les balises html ou body et tous les autres éléments en hériteront. Est-ce une approche? Que fais-tu d'habitude? Y a-t-il une astuce ou quelque chose? Je n'utilise pas bootstrap ni aucun autre framework frontal
Vous pouvez essayer d'ajouter le viewport<meta> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
tilisation de la balise META viewport pour contrôler la mise en page sur les navigateurs mobiles
Utilisez les requêtes multimédias ( Lien ) et les pourcentages (%), 16 px (taille de police par défaut) = 100%. J'espère que ça aide.