Solucionar problema iOS 6 y 7 con las unidades vw y vh

En esta ocasión y tras mucho tiempo, os traigo un artículo breve para explicar cómo solucionar un bug o error que existe en Safari, concretamente en la versión del mismo para iOS 6 y iOS 7.

Estoy preparando, entre otras cosas, mi página web para el 2015 (espero tenerla antes) y he hecho alguna cosilla chula utilizando los vh (viewport height o unidad relativa a la altura visible del navegador).

El caso es que he utilizado Firefox para maquetar el nuevo diseño y al probarlo en otros navegadores ha funcionado perfecto. El problema ha llegado al probar iOS 7, donde la unidad vh no respondía según lo esperado.

Teóricamente (y digo teóricamente porque es lo que he leído buscando sobre el error), es un bug relacionado con el manejo de la pantalla retina en iOS 6 y 7.

La solución

Para solucionarlo, os dejo un trozo de código que podéis pegar en vuestro fichero de javascript (o meterlo como script) que convierte las unidades viewport a píxeles haciendo un cálculo sencillo:

/* Fix iOS 7 bug for -unit support */
var iOS = navigator.userAgent.match(/(iPod|iPhone|iPad)/);
if(iOS){
    function iosVhHeightBug() {
        var height = $(window).height();
        $("#capa-para-redimensionar").css('min-height', height);
    }
 
    iosVhHeightBug();
    $(window).bind('resize', iosVhHeightBug);
}

Como siempre, dar las gracias a la fuente por compartir conocimiento.

¡MANTENME INFORMADO!

¡Gracias por tu interés en estar informado del próximo lanzamiento de mis cursos! 😎

¡No hago spam! Lee la política de privacidad para tener más información.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.