Archivo de
Diseño web para iPad, Consideraciones en el CSS
Miércoles, Agosto 18, 2010
Hace poco tuve que realizar una adaptación de un sitio Flash a HTML enfocado principalmente en usuarios de iPad o iPhone, pues como todo sabemos, estos aparatos no aceptan Flash.
Aunque Apple afirma que mientras se usen propiedades estandar en el CSS todo funciona, la verdad es que Mobile Safari se comporta algo diferente que su hermano mayor:
Sin cursor no hay :hover
Al ser un dispositivo de tacto, no hay cursor en el iPad, por lo tanto, el estado :hover de un enlace, se comporta como un :focus. Esto también afecta los eventos de click de Javascript.
No hay barras de desplazamiento en overflow
Al usar frames o divs con propiedad overflow, es imposible tener visibles las barras. En el
caso en que sea 100% necesario tener una barra de scroll a mitad de la página (aunque no veo para que) se puede recurrir al jQuery, con plugins como jScrollPane.
visibility:hidden se comporta como display:none
La diferenica entre visibility:hidden y display:none es que la primera aunque esconde el
contenido sigue ocup
ando el espacio y la segunda hace que desaparezca sin afectar el layout, para Mobile Safari es lo mismo.
No funciona position:fixed
Esto si puede ser un problema para ciertos diseños, también es necesario utilizar Javascript: Lazycoder tiene una solución.
Lo que si funciona es la mayoría del CSS3 para Webkit
Tipografías personalizadas, esquinas redondas, sombras, transparencias y muchas mas funcionan perfectamente, checa compatibilidad en CSS Infos.