Me han pedido crear una página HTML /JavaScript para simular la detección de los dispositivos móviles (iPhone /iPad /Android) mediante el código JavaScript. Esto lo llevará al usuario a una pantalla diferente que les pide su dirección de correo electrónico.

InformationsquelleAutor Jeevs | 2011-07-12

20 Comentarios

  1. 74

    Sé que esta respuesta viene de 3 años tarde, pero ninguno de las otras respuestas son, de hecho, el 100% correcto. Si desea detectar si el usuario es CUALQUIER tipo de dispositivo móvil (Android, iOS, BlackBerry, Windows Phone, Kindle, etc.), a continuación, puede utilizar el código siguiente:

    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.
    }
    • Me gustaría añadir la palabra «Mobile».
    • ¿necesita una biblioteca de algún tipo? La duda es simple.
  2. 26

    Se podría detectar la solicitud de los navegadores cadena de agente de usuario y, a continuación, decidir, basándose en lo que es si proviene de un navegador móvil o no. Este dispositivo no es perfecta, y nunca lo va a ser debido al hecho de que los agentes de usuario no están estandarizados para dispositivos móviles (al menos no a mi conocimiento).

    Este sitio le ayudará a crear el código: http://www.hand-interactive.com/resources/detect-mobile-javascript.htm

    Ejemplo:

    Usted podría conseguir el agente de usuario en javascript haciendo esto:

    var uagent = navigator.userAgent.toLowerCase();

    Y, a continuación, hacer la comprobación en el mismo formato como este (sólo usar el iPhone como un ejemplo rápido, pero otros necesitan un poco diferente)

    function DetectIphone()
    {
       if (uagent.search("iphone") > -1)
          alert('true');
       else
          alert('false');
    }

    Editar

    Debería crear una página HTML simple como:

    <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>
    • Pero me pregunto ¿qué sería empezar? Crear una dummy página web y embedd esta codificación no. Es html que vamos a utilizar, ya que como he mencionado en mi código de arriba, yo no tengo nada para empezar.
    • Comprobar mi edición, que debe empezar.
    • Genial!!!!!! Gracias por que. Cómo acerca de la redirección a una página diferente. ¿Crees que algo como esto iba a ayudar? si((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/Android/i))) { if (document.cookie.indexOf(«iphone_redirect=false») == -1) de la ventana.ubicación = «m.espn.go.com/wireless/?iphone&i=COMR«;
    • Seguro 🙂
    • No olvides que los agentes de usuario pueden cambiarse, falso y puede no reflejar el navegador actual. Dicho esto, si un cliente parodias/cambios de su UserAgent y que la visión errónea que muestran es su propia culpa. Hay otras maneras otras de pura agente de usuario, aunque el agente de usuario normalmente es la raíz de todos detección. Hay una muy buena (aunque anticuado) ejemplo github.com/ahand/mobileesp?files=1
    • Smart – no había pensado en eso 😀

  3. 20

    Una bastante simple solución es comprobar que el ancho de la pantalla. Ya que casi todos los dispositivos móviles tienen un máximo de ancho de pantalla de 480px (en la actualidad), es bastante fiable:

    if( screen.width <= 480 ) {
        location.href = '/mobile.html';
    }

    La cadena de agente de usuario también es un lugar para buscar. Sin embargo, la primera solución es aún mejor, ya que incluso si una maldita dispositivo no responde correctamente por el agente de usuario, el ancho de la pantalla no miente.

    La única excepción aquí están tablet pc como el ipad. Los dispositivos tienen un mayor ancho de pantalla de los smartphones y, probablemente voy a ir con el agente de usuario de cadena para aquellos.

    • A la derecha!! Sólo necesito para detectar iPhone o Android. Así que esto no debería ser un problema, pero sólo para hacerle saber que tengo absolutamente nada para empezar. Voy a crear un muñeco Página web y embedd esto! También ¿cómo sería la detección de ser revisada? Lo necesito para la transferencia de la secuencia de comandos a un teléfono?
    • A mi, de cómo los anchos de pantalla han cambiado 😉
  4. 14
    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 
    }
    • este es el mejor y más limpio solución
    • Aunque este código no se ejecutará más de un bloque, ya que es la comprobación de una cosa una y otra vez, este código debe hacer uso de else-if bloques debido a que la razón. También, ¿qué pasa si el agente de usuario variable cambia alguna entre los bloques? Se va a ejecutar más de 1 bloque, aquí.
    • Tienes razón ,y no olvides que el código fue hace 4 años 🙂 y ahora hay mejores herramientas o formas de hacer el mismo trabajo
  5. 8
    var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null 
        || screen.width <= 480;
    • +1 para regex coincidencia que permite a los usuarios comprobar fácilmente para múltiples dispositivos en una sola toma. Sin embargo, me gustaría añadir, para mayor claridad porque denotan /i, al final de la expresión regular insensible partido realmente no hay necesidad de camello caso de que la búsqueda de parámetros. El siguiente sería el equivalente (y también de la búsqueda para dispositivos android): .match(/ipad|iphone|ipod|android/i)
  6. 6

    Una simple solución podría ser la css-sólo. Usted puede definir los estilos en su hoja de estilos y, a continuación, ajustar en la parte inferior de la misma. Smartphones modernos actúan como se acaba de 480px de ancho, mientras que en realidad son un montón 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!

  7. 5

    Dado que ahora el 2015, si se tropezó a través de esta pregunta, entonces usted probablemente debería ser el uso de de la ventana.matchMedia (y, si aún 2015, polyfilling para navegadores antiguos):

    if (matchMedia('handheld').matches) {
        //...
    } else {
        //...
    }
    • Esto no funciona para mí en un Nexus 5 corriendo Firefox.
    • Nota de MDN Nota: CSS2.1 y Consultas de Medios 3 define varios tipos de medios (tty, tv, tv de proyección, de mano, en braille, relieve, auditivo), pero que se han dejado de utilizar en Consultas de Medios de comunicación 4 y no debe ser utilizado.
    • Véase mi respuesta a continuación, por alguna razón de la computadora de mano no funciona para mí.
  8. 4

    Así que hice esto. Muchas 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>
  9. 3

    Puede utilizar 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

    Usted puede encontrar una lista de useragent cadenas http://www.useragentstring.com/pages/useragentstring.php

  10. 3

    Te aconsejo retirar http://wurfl.io/

    En pocas palabras, si usted importa un pequeño archivo JS:

    <script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

    usted se quedará con un objeto JSON que parece:

    {
     "complete_device_name":"Google Nexus 7",
     "is_mobile":true,
     "form_factor":"Tablet"
    }

    (eso suponiendo que usted está usando un Nexus 7, por supuesto) y usted será capaz de hacer cosas como:

    WURFL.complete_device_name

    Esto es lo que están buscando.

    Descargo de responsabilidad: yo trabajo para la empresa que ofrece este servicio gratuito. Gracias.

    • «Usted puede utilizar estos servicios de forma gratuita, siempre y cuando su sitio web está a disposición del público y no requieren de una cuota o suscripción de pago para el acceso.» –web.wurfl.io/#wurfl-js
  11. 2

    Este es un ejemplo de cómo comprobar si la página web se carga en la aplicación de Escritorio o móvil.

    JS se va a ejecutar en la carga de la página y se puede hacer de Escritorio cosas específicas sobre la carga de la página por ejemplo ocultar 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>
  12. 1

    Determinar lo que el Agente de Usuario para los dispositivos que se necesitan para simular y probar una variable en contra de 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
    }
    • Va a SIMULAR la detección de estos dispositivos, ¿verdad?
    • !!~userAgent.indexOf('iphone') // >> true|false
  13. 0

    Esta es mi versión, muy similar a la superior, pero creo que una buena 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;
    }
  14. 0

    Dispositivo de detección basado en el agente de usuario no es muy buena solución, mejor es detectar características como dispositivo táctil (en nuevos jQuery que quitar $.browser y uso $.support lugar).

    Para detectar móvil puede comprobar toque eventos:

    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 una ‘pantalla táctil’ dispositivo mediante el uso de JavaScript?

    • Voto porque el OP está pidiendo dispositivo móvil. Con una pantalla táctil de los portátiles de hoy en día, ‘Dispositivo Táctil’ no es una muy buena solución.
  15. 0

    Otra posibilidad es el uso de mobile-detect.js. Pruebe el demo.

    De 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
  16. 0

    Como yo (tipo de sin éxito) busca la solución adecuada para mi hack, quiero añadir mi hack aquí, no obstante: simplemente me echa para el apoyo de la orientación del dispositivo, que parece ser el más significativas diferencias entre los móviles y de escritorio:

    var is_handheld=0; //sólo un mundial
    if(window.DeviceOrientationEvent) {is_handheld=1;}

    Que se dice, en mi humilde opinión una página de ofrecer también el manual de elección entre el móvil /escritorio de diseño. Tengo 1920*1080 y me puede hacer zoom en una simplificada y reducida wordpressoid fragmento no es siempre una buena cosa. Especialmente obligando a un diseño basado en no laborable dispositivo de detección – se pasa todo el tiempo.

  17. 0

    Pruebas para el agente de usuario es complejo, desordenado y siempre falla.
    Yo tampoco encontramos con que los medios de comunicación de coincidencia para «mano» que funcionó para mí. La solución más simple era detectar si el ratón estaba disponible. Y que se puede hacer de la siguiente manera:

    var result = window.matchMedia("(any-pointer:coarse)").matches;

    Que le dirá si usted necesita para mostrar hover elementos o no, y cualquier otra cosa que requiere un físico puntero. El tamaño puede hacerse en más consultas de medios de comunicación basados en el ancho.

    Los siguientes pequeña biblioteca es un cinturón de llaves versión de la consulta anterior, debe cubrir la mayoría «son una tableta o un teléfono con ningún ratón» en los escenarios.

    https://patrickhlauke.github.io/touch/touchscreen-detection/

    Medios de comunicación de los partidos han sido admitidos desde el 2015 y se puede comprobar la compatibilidad de aquí:
    https://caniuse.com/#search=matchMedia

    En corto debe mantener las variables relativas a si la pantalla es una pantalla táctil, y también lo que el tamaño de la pantalla. En teoría, podría haber una pequeña pantalla y un ratón operado de escritorio.

  18. 0

    Similar a varias de las respuestas anteriores. Esta sencilla función, funciona muy bien para mí. Es actual a partir de 2019

    function IsMobileCard()
    {
    var check =  false;
    
    (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
    
    return check;   
    }

Dejar respuesta

Please enter your comment!
Please enter your name here