Tictac Soluciones Informáticas > Diseño web > PERSONALIZA TU WEB PARA DISPOSITIVOS APPLE (PARTE I)

PERSONALIZA TU WEB PARA DISPOSITIVOS APPLE (PARTE I)

 

 

       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. 

 

2018-07-02T17:41:01+00:0008/02/2012|Diseño web, HTML5|

Un comentario

  1. Muchísimas gracias queda explicado

Deje su comentario