movil - ¿Cómo detectar un dispositivo móvil con JavaScript?
mobile detect js examples (19)
Se me ha pedido que cree una página HTML / JavaScript real para simular la detección de los dispositivos móviles (iPhone / iPad / Android) usando código JavaScript. Esto llevará al usuario a una pantalla diferente que le pide su dirección de correo electrónico.
Como yo (sin éxito) busqué la solución adecuada para mi hack, quiero añadir mi hack aquí: simplemente verifico el soporte de la orientación del dispositivo, que parece ser la diferencia más significativa entre los móviles y el escritorio:
var is_handheld = 0; // solo un if (window.DeviceOrientationEvent) global {is_handheld = 1;}
Una vez dicho esto, una página debería ofrecer también la elección manual entre el diseño del móvil / escritorio. Tengo 1920 * 1080 y puedo hacer zoom: un trozo de wordpressoid simplificado y con características reducidas no siempre es bueno. Especialmente forzando un diseño basado en la detección de dispositivos que no funcionan, sucede todo el tiempo.
Dado que ahora es 2015, si te topas con esta pregunta, probablemente deberías estar usando window.matchMedia (y, si todavía es 2015, polyfilling los navegadores más antiguos):
if (matchMedia(''handheld'').matches) {
//...
} else {
//...
}
Desde el sitio del desarrollador de mozilla: cadenas de agente de usuario específicas del dispositivo
Encuentro que esto es un poco más "preciso" cuando se filtra específicamente para dispositivos móviles.
Detectará la cadena del agente de usuario de los navegadores solicitantes y luego decidirá en función de qué se trata si proviene de un navegador móvil o no. Este dispositivo no es perfecto, y nunca se debe al hecho de que los agentes de usuario no están estandarizados para dispositivos móviles (al menos no que yo sepa).
Este sitio te ayudará a crear el código: http://www.hand-interactive.com/resources/detect-mobile-javascript.htm
Ejemplo :
Puede obtener el agente de usuario en javascript haciendo esto:
var uagent = navigator.userAgent.toLowerCase();
Y luego haga el cheque en el mismo formato que este (simplemente usando iPhone como un ejemplo rápido, pero otros necesitarían ser un poco diferentes)
function DetectIphone()
{
if (uagent.search("iphone") > -1)
alert(''true'');
else
alert(''false'');
}
Editar
Deberías crear una página HTML simple como esta:
<html>
<head>
<title>Mobile Detection</title>
</head>
<body>
<input type="button" OnClick="DetectIphone()" value="Am I an Iphone?" />
</body>
</html>
<script>
function DetectIphone()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1)
alert(''true'');
else
alert(''false'');
}
</script>
Determine qué es el agente de usuario para los dispositivos que necesita simular y luego pruebe una variable con eso.
por ejemplo:
// var userAgent = navigator.userAgent.toLowerCase(); // this would actually get the user agent
var userAgent = "iphone"; /* Simulates User Agent for iPhone */
if (userAgent.indexOf(''iphone'') != -1) {
// some code here
}
Entonces hice esto. ¡Gracias a todos!
<head>
<script type="text/javascript">
function DetectTheThing()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1
|| uagent.search("android") > -1 || uagent.search("blackberry") > -1
|| uagent.search("webos") > -1)
window.location.href ="otherindex.html";
}
</script>
</head>
<body onload="DetectTheThing()">
VIEW NORMAL SITE
</body>
</html>
Esta es mi versión, bastante similar a la superior, pero creo que sirve como referencia.
if (mob_url == "") {
lt_url = desk_url;
} else if ((useragent.indexOf("iPhone") != -1 || useragent.indexOf("Android") != -1 || useragent.indexOf("Blackberry") != -1 || useragent.indexOf("Mobile") != -1) && useragent.indexOf("iPad") == -1 && mob_url != "") {
lt_url = mob_url;
} else {
lt_url = desk_url;
}
Este es un ejemplo de cómo verificar si la página web está cargada en el escritorio o la aplicación móvil.
JS se ejecutará en la carga de la página y puede hacer cosas específicas del Escritorio en la carga de la página, por ejemplo, ocultar el escáner de código de barras.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
/*
* Hide Scan button if Page is loaded in Desktop Browser
*/
function hideScanButtonForDesktop() {
if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))) {
// Hide scan button for Desktop
document.getElementById(''btnLinkModelScan'').style.display = "none";
}
}
//toggle scanButton for Desktop on page load
window.onload = hideScanButtonForDesktop;
</script>
</head>
La detección de dispositivos basada en el agente de usuario no es una solución muy buena, es mejor detectar características como el dispositivo táctil (en jQuery nuevo, eliminan $.browser y usan $.support en $.support lugar).
Para detectar dispositivos móviles, puedes verificar si hay eventos táctiles:
function is_touch_device() {
return ''ontouchstart'' in window // works on most browsers
|| ''onmsgesturechange'' in window; // works on ie10
}
Tomado de ¿Cuál es la mejor manera de detectar un dispositivo de ''pantalla táctil'' usando JavaScript?
Otra posibilidad es usar mobile-detect.js . Prueba la demo
Uso del navegador:
<script src="mobile-detect.js"></script>
<script>
var md = new MobileDetect(window.navigator.userAgent);
// ... see below
</script>
Node.js / Express:
var MobileDetect = require(''mobile-detect''),
md = new MobileDetect(req.headers[''user-agent'']);
// ... see below
Ejemplo:
var md = new MobileDetect(
''Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i'' +
'' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)'' +
'' Version/4.0 Mobile Safari/534.30'');
// more typically we would instantiate with ''window.navigator.userAgent''
// as user-agent; this string literal is only for better understanding
console.log( md.mobile() ); // ''Sony''
console.log( md.phone() ); // ''Sony''
console.log( md.tablet() ); // null
console.log( md.userAgent() ); // ''Safari''
console.log( md.os() ); // ''AndroidOS''
console.log( md.is(''iPhone'') ); // false
console.log( md.is(''bot'') ); // false
console.log( md.version(''Webkit'') ); // 534.3
console.log( md.versionStr(''Build'') ); // ''4.1.A.0.562''
console.log( md.match(''playstation|xbox'') ); // false
Puede usar la cadena de agente de usuario para detectar esto.
var useragent = navigator.userAgent.toLowerCase();
if( useragent.search("iphone") )
; // iphone
else if( useragent.search("ipod") )
; // ipod
else if( useragent.search("android") )
; // android
etc
Puede encontrar una lista de cadenas de caracteres de uso aquí http://www.useragentstring.com/pages/useragentstring.php
Sé que esta respuesta llega con 3 años de retraso, pero ninguna de las otras respuestas es 100% correcta. Si desea detectar si el usuario está en CUALQUIER forma de dispositivo móvil (Android, iOS, BlackBerry, Windows Phone, Kindle, etc.), puede usar el siguiente código:
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
// Take the user to a different screen here.
}
Simplemente use DeviceDetection
deviceDetection.deviceType // phone | tablet according to device
Te aconsejo que visites http://wurfl.io/
En pocas palabras, si importa un pequeño archivo JS:
<script type=''text/javascript'' src="//wurfl.io/wurfl.js"></script>
te quedarás con un objeto JSON que se ve así:
{
"complete_device_name":"Google Nexus 7",
"is_mobile":true,
"form_factor":"Tablet"
}
(suponiendo que esté utilizando un Nexus 7, por supuesto) y podrá hacer cosas como:
WURFL.complete_device_name
Esto es lo que estás buscando.
Descargo de responsabilidad: trabajo para la compañía que ofrece este servicio gratuito. Gracias.
Una solución bastante simple es verificar el ancho de la pantalla. Como casi todos los dispositivos móviles tienen un ancho de pantalla máximo de 480 px (en la actualidad), es bastante confiable:
if( screen.width <= 480 ) {
location.href = ''/mobile.html'';
}
La cadena de agente de usuario también es un lugar para buscar. Sin embargo, la solución anterior es aún mejor, ya que incluso si algún dispositivo maldito no responde correctamente para el usuario-agente, el ancho de la pantalla no miente.
La única excepción aquí son las tabletas como el ipad. Esos dispositivos tienen un ancho de pantalla más alto que los teléfonos inteligentes y probablemente iría con la cadena de agente de usuario para esos.
Una solución simple podría ser solo CSS. Puede establecer estilos en su hoja de estilo y luego ajustarlos en la parte inferior. Los teléfonos inteligentes modernos actúan como si tuvieran solo 480 px de ancho, mientras que en realidad son mucho más. El código para detectar una pantalla más pequeña en css es
@media handheld, only screen and (max-width: 560px), only screen and (max-device-width: 480px) {
#hoofdcollumn {margin: 10px 5%; width:90%}
}
¡Espero que esto ayude!
Uso mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
if(navigator.userAgent.match(/iPad/i)){
//code for iPad here
}
if(navigator.userAgent.match(/iPhone/i)){
//code for iPhone here
}
if(navigator.userAgent.match(/Android/i)){
//code for Android here
}
if(navigator.userAgent.match(/BlackBerry/i)){
//code for BlackBerry here
}
if(navigator.userAgent.match(/webOS/i)){
//code for webOS here
}
var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null
|| screen.width <= 480;