🖥️Convertidor de alto de ventana (VH) a Píxeles

¿Qué es la unidad VH y por qué es problemática en móviles?

vh (viewport height) es una unidad relativa al alto total del viewport: 1vh equivale al 1% del alto de la ventana. Se usa mucho para crear secciones de pantalla completa (height: 100vh), pero en navegadores móviles esconde un problema conocido: la barra de direcciones del navegador aparece y desaparece dinámicamente al hacer scroll, cambiando el alto real disponible en tiempo real — y durante años, 100vh se calculaba contra el alto sin la barra visible, provocando que el contenido se recortara justo debajo del pliegue cuando la barra reaparecía. Este convertidor de vh a píxeles no solo resuelve la conversión básica, sino que en su Modo 2 cuantifica exactamente ese problema para tu dispositivo objetivo.

¿Cómo se calcula la conversión de VH a píxeles?

Ejemplo: 100vh en un monitor de escritorio de 1080px de alto equivale exactamente a 1080px. Otras conversiones habituales: 50vh en una pantalla de 900px de alto son 450px, y 1vh en un móvil de 844px de alto de pantalla son 8,44px — pequeñas diferencias que se acumulan rápido en layouts que dependen de vh para secciones completas.

Guía paso a paso: cómo usar este conversor de vh a px

1) Escribe el "Valor en VH" que quieres convertir. 2) Indica el "Alto del Viewport" en píxeles del dispositivo objetivo. 3) Obtén el resultado en píxeles junto con el CSS listo para copiar. Si trabajas en un layout de pantalla completa pensado para móviles, cambia al Modo 2: Altura Real en Móviles (dvh) para ver cuánto contenido corre riesgo de quedar recortado por la barra de direcciones del navegador.

Modo 2: lvh, svh y dvh — la solución moderna al problema móvil

CSS introdujo tres nuevas unidades de viewport para resolver este problema de forma explícita: lvh (large viewport height, el alto máximo con la barra oculta), svh (small viewport height, el alto mínimo con la barra visible), y dvh (dynamic viewport height, que se recalcula en vivo según el estado real de la barra en cada momento). El Modo 2 de esta herramienta calcula la diferencia exacta en píxeles entre lvh y svh para tu dispositivo, mostrando cuánto contenido corre riesgo de quedar recortado si sigues usando el clásico 100vh, y genera el código con el patrón de mejora progresiva recomendado (min-height: 100vh como respaldo, seguido de min-height: 100dvh que lo sobrescribe en navegadores compatibles).

Casos de uso: dónde aparece vh en proyectos reales

vh se usa habitualmente en secciones "hero" de pantalla completa en landing pages, en modales y overlays que deben ocupar toda la altura visible, en aplicaciones de una sola página (SPA) donde el layout principal debe llenar exactamente la ventana sin generar scroll adicional, y en experiencias de scroll-snapping donde cada sección ocupa un múltiplo del alto del viewport. Si tu layout también depende del ancho del viewport (por ejemplo, para tipografía o espaciado fluido), el convertidor de VW a píxeles resuelve el mismo tipo de cálculo para el eje horizontal.

Errores comunes al usar VH en diseño responsivo

El error más costoso es asumir que 100vh siempre equivale a "toda la pantalla visible" en cualquier dispositivo — en móviles, con la barra de direcciones visible, el contenido definido a 100vh puede quedar cortado por debajo, ocultando botones o texto importante. Otro error habitual es no probar el diseño con el teclado virtual abierto en móviles, que en muchos navegadores también reduce el viewport visible de forma similar a la barra de direcciones. Y un tercer error: usar height: 100vh en vez de min-height: 100vh en secciones con contenido variable, impidiendo que la sección crezca si el contenido es más alto que la pantalla.

VH frente a otras unidades de viewport

Además de vh, conviene conocer sus unidades hermanas: vw para el ancho (convertible con el convertidor de VW a píxeles), y vmin/vmax, que toman el menor o mayor valor entre vw y vh — muy útiles para elementos que deben caber sin desbordarse sin importar la orientación de la pantalla. Si en cambio necesitas mantener una proporción fija entre ancho y alto (por ejemplo, para un vídeo o una imagen), la herramienta adecuada es la calculadora de relación de aspecto de pantallas.

Cómo probar el problema de 100vh en móviles

Para reproducir el problema que resuelve el Modo 2 sin necesidad de un dispositivo físico, abre las herramientas de desarrollador de Chrome, activa el modo de dispositivo responsive y elige un perfil de móvil real — al hacer scroll dentro de la vista previa, muchos navegadores simulan la aparición y desaparición de la barra de direcciones, permitiéndote ver en vivo cómo un elemento a 100vh queda recortado. Un consejo profesional: si tu sección de pantalla completa incluye un botón de llamada a la acción cerca del borde inferior, ese es precisamente el elemento con más riesgo de quedar oculto por el recorte de 100vh en móviles — considera colocar el contenido crítico más cerca del centro vertical, o adopta directamente dvh para eliminar el riesgo por completo.

Preguntas Frecuentes (FAQ)