Detecta si se usa un navegador en un dispositivo móvil (teléfono / tableta iOS / Android)

¿Hay alguna forma de detectar si se usa un navegador portátil (teléfono / tableta iOS / Android)?

Intenté esto con el objective de hacer un elemento la mitad de ancho en un navegador en un dispositivo portátil, pero no hace la diferencia.

width: 600px; @media handheld { width: 300px; } 

¿Se puede hacer y si es así cómo?

editar: de la página referida en la respuesta de jmaes que utilicé

@media only screen and (max-device-width: 480px) .

Actualización (junio de 2016) : ahora bash admitir las entradas táctiles y de mouse en cada resolución, ya que el outlook del dispositivo borra lentamente las líneas entre lo que son y lo que no son dispositivos táctiles. Los iPad Pros son solo táctiles con la resolución de una computadora portátil de 13 “. Las computadoras portátiles con Windows ahora vienen con pantallas táctiles.

Otras respuestas similares de SO (vea otra respuesta sobre esta pregunta) pueden tener diferentes formas de tratar de averiguar qué tipo de dispositivo está usando el usuario, pero ninguna de ellas es infalible. Le recomiendo que revise esas respuestas si es absolutamente necesario que intente determinar el dispositivo.


Los iPhones, por ejemplo, ignoran la consulta de handheld ( Fuente ). Y no me sorprendería que otros teléfonos inteligentes también lo hagan por motivos similares.

La mejor forma actual que uso para detectar un dispositivo móvil es conocer su ancho y usar la consulta de medios correspondiente para captarlo. Ese enlace allí enumera algunos populares. Una búsqueda rápida en Google le proporcionaría cualquier otra que pueda necesitar, estoy seguro.

Para más específicos del iPhone (como la pantalla Retina), consulte el primer enlace que publiqué.

Detectando dispositivos móviles

Respuesta relacionada: https://stackoverflow.com/a/13805337/1306809

No hay un enfoque único que sea verdaderamente infalible. La mejor opción es mezclar y combinar una variedad de trucos, según sea necesario, para boost las posibilidades de detectar con éxito una gama más amplia de dispositivos portátiles. Vea el enlace de arriba para algunas opciones diferentes.

No detecte los dispositivos móviles, busque los estacionarios en su lugar.

Hoy en día (2016) hay una manera de detectar puntos por pulgada / cm / px que parece funcionar en la mayoría de los navegadores modernos (ver http://caniuse.com/#feat=css-media-resolution ). Necesitaba un método para distinguir entre una pantalla relativamente pequeña, la orientación no importaba y un monitor de computadora estacionario.

Debido a que muchos navegadores móviles no son compatibles, se puede escribir el código CSS general para todos los casos y usar esta excepción para pantallas grandes:

 @media (max-resolution: 1dppx) { /* ... */ } 

Tanto Windows XP como 7 tienen la configuración predeterminada de 1 punto por píxel (o 96 ppp). No sé sobre otros sistemas operativos, pero esto funciona muy bien para mis necesidades.

Editar: dppx no parece funcionar en Internet Explorer … use (96) ppp en su lugar.

Sé que este es un hilo viejo, pero pensé que esto podría ayudar a alguien:

Los dispositivos móviles tienen una altura mayor que el ancho, por el contrario, las computadoras tienen un ancho mayor que la altura. Por ejemplo:

 @media all and (max-width: 320px) and (min-height: 320px) 

así que tendría que hacerse por cada ancho, supongo.

Así es como lo hice:

 @media (pointer:none), (pointer:coarse) { } 

Basado en https://stackoverflow.com/a/42835826/1365066

Creo que una forma mucho más confiable de detectar dispositivos móviles es mirar la cadena navigator.userAgent. Por ejemplo, en mi iPhone, la cadena del agente de usuario es:

Mozilla / 5.0 (iPhone; CPU iPhone OS 10_3_2 como Mac OS X) AppleWebKit / 603.2.4 (KHTML, como Gecko) Versión / 10.0 Móvil / 14F89 Safari / 602.1

Tenga en cuenta que esta cadena contiene dos palabras clave indicadoras: iPhone y móvil. Otras cadenas de agente de usuario para dispositivos que no tengo se proporcionan en:

https://deviceatlas.com/blog/list-of-user-agent-strings

Usando esta cadena, configuro una variable booleana de JavaScript bMobile en mi sitio web para que sea verdadero o falso usando el siguiente código:

 var bMobile = // will be true if running on a mobile device navigator.userAgent.indexOf( "Mobile" ) !== -1 || navigator.userAgent.indexOf( "iPhone" ) !== -1 || navigator.userAgent.indexOf( "Android" ) !== -1 || navigator.userAgent.indexOf( "Windows Phone" ) !== -1 ;