Diferencias entre el Safari de mi Mac y el de mi iPhone o iPad

Antes de que te rompas la cabeza tratando de entender la razón de que tu sitio web se ve distinto en tu móvil y en tu computadora tienes que entender que no se trata del mismo motor de renderizado, es más, lo único que comparten es el nombre.

Existen muchos sitios web que te ofrecen hacer tests de tu sitio web en iPhone o iPad directamente desde tu navegador, pero lo único que hacen es colocar tu sitio en un iframe del tamaño de los dispositivos mencionados. Pero eso no cambia el motor de renderizado, simplemente te muestra tu web en un tamaño distinto.

La única forma de probar tu sitio web en los dispositivos de Apple es la de utilizar el Simulador ⁽¹⁾ que viene junto con el Xcode. Este Simulador no solamente te permitira probar tu sitio de una forma completamente fidedigna sino que también podras probarlo en todos los dispositivos posibles sin la necesidad de comprarlos.

En todo caso aqui hay algunas detallamos algunas diferencias.

1. Safari Mobile no soporta Flash o Silverlight, aunque son ya muy pocos desarrolladores los que utilizan esas tecnologías actualmente.
2. El estilo de los botones o de los campos de los formularios se ve distinto ya que Safari Mobile sobreescribe las reglas de estilo. En todo caso puedes desactivarlas utilizando la opción -webkit-appearance como lo explicamos en el artículo "Mis formularios no se ven igual en Safari ni Chrome".
3. Ten cuidado ya que en Safari Mobile todos los numeros que parecen teléfonos seran renderizados como enlaces para llamadas. En el caso de que esta opción te traiga problemas, puedes eliminarla agregando el siguiente codigo a la cabecera de tu página:
4. Algunas versiones de Safari Mobile no renderizan el posicionamiento fijo (position: fixed).
5. Cuando tienes que escribir en un campo o área de texto en Safari Mobile se abre el teclado. Esto puede en ciertos casos activar el cambio de tamaño de tu dispositivo o activar algun scroll. Lo recomendable es evitar el uso estos comportamientos.
6. Puedes tener problemas con el scroll en iframes o elementos que tengan la propiedad overflow en modo auto. La solución completa esta en el artículo "El problema de scroll de los iframes en iOS".

Seguramente esta lista tiene mas elementos, pero creo que estos son los más comunes. En todo caso, la recomendación es la de siempre utilizar el Simulador para hacer tus pruebas y nunca esta demás el hecho de verificar cada propiedad antes de utilizarla ⁽²⁾.