Actualmente, los dispositivos de Apple suponen una parte bastante amplia de la navegación en internet. Por ello vamos a echar un vistazo a las opciones que nos da su sistema para personalizar nuestra página web para iPods, iPads e iPhones.

Lo más llamativo es poder poner el icono de nuestra página en la pantalla de inicio del dispositivo. El usuario puede hacer esto mediante los menús de Safari, es como poner un marcador, pero el icono será una captura de la web, y preferimos poder poner nuestro propio icono. Para ello debemos añadir 3 cabeceras y 3 iconos de distintos tamaños, para cubrir los diferentes dispositivos:

  • Para iPod e iPhones viejos: 57 x 57 píxeles.
  • Para iPad: 72 x 72 píxeles.
  • Para iPhone 4: 114 x 114 píxeles.

Una vez tenemos los 3 iconos, las cabeceras son las siguientes:

<link rel="apple-touch-icon-precomposed" href="imagenes/ios-icon.png"/>

<link rel="apple-touch-icon-precomposed" sizes="72×72" href="imagenes/ios-icon-ipad.png"/>

<link rel="apple-touch-icon-precomposed" sizes="114×114" href="imagenes/ios-icon-iphone4.png"/>

Como vemos la pequeña de 57 píxeles se usa por defecto si el dispositivo no encuentra otro tamaño más apropiado.

Ya tenemos iconos bonitos cuando el usuario añade la web a su pantalla de inicio, pero a lo mejor no se le ocurre que puede hacerlo, siempre se lo podemos recomendar. Pero esta recomendación solo tiene sentido para usuarios de Safari móvil. Podemos reconocerlos mediante javascript.

if (window.navigator.standalone == false){ //dispositivo Safari móvil que no corre en modo aplicación
            //Código para hacer visible un cartel de recomendación de marcar la web en la pantalla de inicio.
} else if(window.navigator.standalone == true){ //dispositivo Safari móvil que corre en modo aplicación

}else{ //no es un navegador Safari móvil

}

 

Y aquí entra la duda de qué es el modo aplicación, pero eso lo responderemos en la siguiente entrada sobre dispositivos Apple.

A modo de prueba en nuestra página web hemos utilizado este código, y podéis probar como queda en www.tictacsoluciones.com.

Continúa: PERSONALIZA TU WEB PARA DISPOSITIVOS APPLE (PARTE II)