html - movil - pagina web y sus partes
Los elementos del sitio web y la fuente son demasiado pequeños en los móviles (2)
Puedes intentar agregar la etiqueta <meta> la viewport <meta> :
<meta name="viewport" content="width=device-width, initial-scale=1">
Uso de la metaetiqueta viewport para controlar el diseño en navegadores móviles
Acabo de terminar de diseñar y codificar mi nuevo proyecto. Pero necesito que funcione bien en los móviles. Cambié el tamaño de mi pantalla a un ancho de 350 ~ 400px y comencé a codificar y agregarle algunas consultas de medios. Se ve muy bien en los navegadores redimensionados. He cortado algunos elementos y características y todo estaba bien ... hasta que lo probé con mi teléfono inteligente
La pantalla no es grande. Menos de 4 ''(probablemente 3.5). Puse algunas alertas en el código y me di cuenta de que su ancho era de 980px. Casi 3 veces más grande que mis pruebas en navegadores redimensionados.
Todo es demasiado pequeño. Otras cosas son excelentes: las consultas de los medios están funcionando, los cortes que hice en el código también están bien, pero apenas puedes ver el contenido en mi móvil. Esto ciertamente no es lo que yo quería.
Quiero que se vea como una aplicación y, de hecho, se parece a una aplicación en el navegador redimensionado.
¿Cómo creas tus sitios web receptivos para hacer frente a problemas como este?
Leí algo sobre el uso de unidades EM (y hay algo nuevo llamado REM) pero todavía estoy muy confundido al respecto. ¿Tengo que cambiar TODOS los px a em ?
Y también sé que puede establecer el font-size en las etiquetas html o body y todos los demás elementos heredarán de ellos. ¿Es eso un approch? ¿Qué haces usualmente? ¿Hay algún truco o algo? No estoy usando bootstrap ni ningún otro framework de front-end
Utilice consultas de medios ( Link ) y porcentajes (%), 16 px (tamaño de fuente predeterminado) = 100%. Espero que ayude.