ATProto Browser

ATProto Browser

Experimental browser for the Atmosphere

Post

¡Ojo con `vh` en CSS! En móviles no tiene en cuenta la desaparición de las barras de herramientas. La solución es `dvh`: se adapta siempre a la altura real de la ventana. Así, tu diseño aprovecha todo el espacio disponible, evita cortes y mejora la UX.

May 9, 2025, 1:53 PM

{
  "text": "¡Ojo con `vh` en CSS! En móviles no tiene en cuenta la desaparición de las barras de herramientas.\n\nLa solución es `dvh`: se adapta siempre a la altura real de la ventana. Así, tu diseño aprovecha todo el espacio disponible, evita cortes y mejora la UX.",
  "$type": "app.bsky.feed.post",
  "embed": {
    "$type": "app.bsky.embed.images",
    "images": [
      {
        "alt": "Ilustración comparativa de cinco mockups de móvil: tres a la izquierda con height: 100vh donde un fondo azul queda cortado y se cuela bajo las barras de herramientas, y dos a la derecha con height: 100dvh donde un fondo amarillo encaja perfectamente al tamaño real de la ventana visible (adiós trozos de fondo rebeldes que intentan escaparse).",
        "image": {
          "$type": "blob",
          "ref": {
            "$link": "bafkreih6ne43pfma7k6xnl3x4wsvaycdc2pzpfuxhsw2daek5yrews7atq"
          },
          "mimeType": "image/jpeg",
          "size": 194820
        },
        "aspectRatio": {
          "width": 3000,
          "height": 1688
        }
      }
    ]
  },
  "langs": [
    "es"
  ],
  "createdAt": "2025-05-09T13:53:30.228Z"
}