zoom out(?)

[yayoqs]

Estaba programando una appweb y cuando iba a compartirla note que todo el diseño quedo corrido o con fallas, pensé que de mi CSS hasta que hice este test simple y noté que Acode tiene Zoom Out !! Esto es un problema para mi y todo creo que para muchos diseñadores más.
(Podría intentar arreglarlo por mientras estoy armando un par he. Pero ustedes son los expertos, gran trabajo gente, Acode es la luz)

---

Translate

I was developing a web app, and when I went to share it, I noticed the entire layout was misaligned or broken. I thought it was an issue with my CSS until I ran a simple test and realized that Acode has a "Zoom Out" feature enabled! This is a problem for me—and, I imagine, for many other designers as well.

---

[Jobians]

Hola @yayoqs. Sí, es un clásico. El problema no es realmente un bug de Acode, sino cómo renderiza su visor interno. Acode usa el WebView del sistema Android, que muchas veces no aplica el escalado inicial ni las reglas de visualización móvil de la misma forma que lo hacen Chrome o Brave de forma nativa (por eso notas ese efecto de "zoom out").

Para que no te vuelva a pasar y tu layout se mantenga firme en cualquier navegador, asegúrate de meter esto en tu código:

1. Clava el meta viewport en el HTML

Revisa si te falta esta etiqueta en el <head>. Sin esto, los navegadores móviles intentan meter la web de escritorio a la fuerza en la pantalla pequeña escalando todo hacia abajo:

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

2. Capa el "Text Autosizing" en tu CSS

A veces Chrome y Brave detectan que un texto es muy pequeño para móvil y lo agrandan por su cuenta (Text Inflation), rompiendo cajas y columnas que en Acode se veían perfectas. Lo puedes frenar metiendo esto arriba del todo en tu CSS:

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

3. Un tip extra para cuando programes en Acode

Para ahorrarte dolores de cabeza con el responsive, cuando abras la previsualización en Acode, dale a los tres puntitos de arriba a la derecha y selecciona "Abrir en el navegador" (Open in browser). Así trabajas directamente sobre una pestaña real de Chrome o Brave y vas viendo los cambios tal cual los va a ver el usuario final.