ProTip: Solución Css a los problemas de IOS 7 y Safari con vw y vh 5.2.15
Una solución con @medias queries Css a los problemas de los dispositivos con IOS7 y las unidades relativas al viewport (vw/vh) al cambiar su orientación.
ProTip: Solución Css a los problemas de IOS 7 y Safari con vw y vh
Los dispositivos móviles con IOS 7 y menores presentan una serie de problemas en el manejo (soporte) a las unidades de medida relativas al viewport vh y vw entre otras.
Ya en un artículo previo me hacía eco de alguna de estas "sorpresas". En él la solución se encuentra en el uso de JS.
Otro problema de los dispositivos móviles que usan IOS7 se presenta al realizar cambios de orientación en ellos en elementos que tienen su anchura declarada en vw y su altura en vh al girarlos no las recalcula.
La solución propuesta por el usuario @pburtchaell en github.com pasa por el uso de @medias queries específicas para corregir el error.
Así, para un elemento foo con tamaños declarados en estos valores las @medias queries para los distintos dispositivos quedarían así:
.foo {
height: 100vh;
width: 100vw;
background: url(pic.jpg) center center / cover no-repeat;
}
/*
iPad portrait orientation.
*/
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
.foo {
height: 1024px;
}
}
/*
iPad landscape orientation.
*/
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
.foo {
height: 768px;
}
}
/* También se pueden fijar por su "aspect ratio".
iPhone 5
*/
@media screen and (device-aspect-ratio: 40/71) {
.foo {
height: 500px;
}
}
Créditos
Información encontrada en github.com
La imagen del inicio de internet archive book images en flickr.
 al cambiar su orientación.){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
nice one
ResponderEliminar