Intentando crear una lista de reproducción en mi blog de Antología Poética Multimedia que se viese en los dispositivos móviles de Apple, me encuentro con que la barra de scrolling no funciona en dichos dispositivos.
Al parecer en versiones anteriores de los sistemas operativos, había alguna alternativa que, con las últimas actualizaciones, ha dejado de funcionar.
Me he pasado unos cuantos días intentando buscar alguna solución.
No parece que sea fácil.
Por un lado está la propia dificultad del empeño.
Por otro, mis escasos conocimientos de CSS y de programación en general.
Y, por otro, las dificultades del idioma. La gran mayoría de las propuestas de solución (casi ninguna funciona, o al menos yo no he sabido hacerlo funcionar) están en inglés.
Al final, esta mañana, buscando de nuevo, he encontrado esta solución.
Y ésta sí que la he sabido llevar a la práctica.
La verdad es que en mi iPad funciona de fábula.
Y, en mi PC, con casi todos los navegadores, aparece una doble barra de scrolling que, visto lo visto, lo podemos dejar como mal menor.
Creo que va a ser difícil afinar hasta ese extremo la solución.
Se trata de "envolver" el fragmento de código iframe entre las etiquetas <div > y con el atributo class para poderlo referenciar desde la hoja de estilos CSS.
<div class="scroll-wrapper">
<iframe src="http://laruta_de_la_pagina_que_queramos_mostrar.html"></iframe>
</div>
En la cabecera del documento entre <head> y </head> hacemos una llamada a la hoja de estilos que tenemos que crear y a la que hemos llamado estilo1.css, por ejemplo:
<link href='http://laruta_del_archivo_estilo1.css' rel='stylesheet' type='text/css'/>
Y en nuestra hoja de estilo css que hemos guardado con el nombre estilo1.css escribimos
.scroll-wrapper { -webkit-overflow-scrolling: touch; overflow-y: scroll; height: 400px; width: 550px; } .scroll-wrapper iframe {
}
Con esto ya se nos debería mostrar el iframe en los dispositivos móviles de Apple a un toque de dedo para deslizar el contenido de la página mostrada.
Ver solución en mi Antología Poética Multimedia.
Más información.
No hay comentarios:
Publicar un comentario