Solución puro Css al bug de IOs y Safari con la unidad vh 5.8.15
Solución pura Css (utilizando @media queries) al bug o fallo de los IO´s y Safari con elementos que tienen declarada su altura en unidades vh (viewport height).
Solución puro Css al bug de IOs y Safari con la unidad vh
Hace ahora un año publicaba el artículo IOs, Safari y su bug con la unidad relativa al viewport vh fruto de mi encontronazo con dicho bug que supuso tener que prescindir del tema que había implementado en el blog por entonces.
En ese post tienes la descripción del bug y varias soluciones. Todas las recogidas allí suponen el uso de javascript. Quizás una de las más utilizadas, por lo que leo, sea viewport-units-buggyfill [en github].
Así que después de un año tocó volver sobre esta cuestión y ver si existía alguna solucción pure Css
. Y sí, haberla hayla.
La solución es sencilla. Todo está en el uso de @media queries
y declarar en ellas, a los elementos que teniendo height: 100vh sufren el bug, la altura del viewport del dispositivo en cuestión.
/* fix bug de iOS con 100vh */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.el_100vh {
height: 768px;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.el_100vh {
height: 1024px;
}
}
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
.el_100vh {
height: 320px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
.fullheight {
height: 568px;
}
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
.el_100vh {
height: 320px;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
.el_100vh {
height: 480px;
}
}
Como ves, cada dispositivo se identifica por las medidas de su viewport (tanto ancho como alto) en las dos orientaciones (landscape y portait
) y en cada una de ellas se le declara al elemento en cuestión (.el_100vh) su altura con un valor igual a la altura del viewport de ese dispositivo en dicha orientación.
Créditos y origen
La solución la encontré en webdesignerwall.com y en ese artículo, así mismo, mencionan haberla visto en los temas de Themify y los puntos de ruptura (valores en px usados en las @media queries) los obtuvo de aquí.
 al bug o fallo de los IO´s y Safari con elementos que tienen declarada su altura en unidades vh (viewport height).){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso