Cómo usar userAgent para detectar dispositivos móviles

¿Alguien me puede ayudar con esto?Cómo usar userAgent para detectar dispositivos móviles

Me gustaría detectar dispositivos como Iphone, BB, andriod y el navegador para aplicar sus CSS específicos para licuarlos o ajustarlos a su resolución.

Does andriod y Iphone tienen un problema de resolución de diferencia o un problema de css cuando se trata de un navegador móvil porque planeo usar el mismo css para esos 2 porque sé que están usando el mismo safari de navegador como predeterminado.

Fuente

2012-02-16 Bert

Creo que tiene problemas de resolución si necesita que un sitio web llegue al 100% en cada dispositivo. –

yah estoy usando% en ancho y alto en mi sitio. pero quiero que el sitio se vea diferente en el móvil. al igual que Facebook tiene su versión móvil – Bert

intenta utilizar http://www.php.net/get_browser y comprobar si hay isMobileDevice campo. Por supuesto, podría ayudar solo si la ruta al browscap.ini está configurada en php.ini. Si no es así, puede utilizar clases PHP como https://github.com/garetjax/phpbrowscap

Fuente

2012-02-16 06:53:50 Cheery

oh genial este es en PHP. lo intenté y funciona, pero un problema es si en el móvil instalaron un navegador diferente. Me gustaría ser específico en el dispositivo para que se organice – Bert

@Bert. Comprueba el navegador mediante la cadena de User-Agent enviada con cada solicitud. Cuando el navegador no envía la identificación en UA, no puede detectarlo incluso con javascript. Solo que, probablemente, teniendo en cuenta la resolución de la pantalla. Pero no necesita saber qué tipo de dispositivo es, solo si es móvil o no. – Cheery

sí, probé el código. usándolo para detectar el dispositivo, entonces almaceno en una variable $ css_iphone = ". css" el enlace CSS así que lo adapto en un dispositivo diferente. También estoy utilizando consultas de medios para este – Bert

Aquí se muestra un ejemplo en javascript:

var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/); 

if(isMobile) { 
    // User-Agent is IPhone, IPod, IPad, Android or BlackBerry 
}

para comprobar si hay una cadena de agente de usuario específica que puede hacer:

if(navigator.userAgent.match(/iPhone/)) { 
    // The User-Agent is iPhone 
}

Fuente

2012-02-16 06:51:51 Cyclonecode

oh, déjame probar esa ... ¿así que estará en javascript? if (isMobile == 'iPhone') – Bert

@Bert - Sí, es javascript y lo compruebas como: 'if (isMobile) {// doSomething here}'. Para comprobar solo el iPhone, podría hacer: 'if (navigator.userAgent == 'IPhone')' – Cyclonecode

yah lo intenté, funciona. Intento usar document.getElementById ('id').classList.add ('clase'); document.getElementById ('id'). ClassList.remove ('clase'); para probar. podría usar jquery para eso. – Bert

echar un vistazo aquí: http://www.zytrax.com/tech/web/mobile_ids.html y aquí: http://www.mobile-phone-specs.com/user-agent-browser/0/

Hay listas de casi todas las cadenas de agente de usuario para usted. .

Fuente

2012-02-16 06:54:21 rkosegi

@rkosegi .. gracias esto me ayuda mucho. – Bert

Puede usar CSS Consultas de medios para identificar los diferentes dispositivos (en realidad, las diferentes funciones del dispositivo como dispositivo de ancho, dpi, etc)

Para el CSS, puede tener diferentes opciones como tener CSS separada para cada tipo del dispositivo O tener un diseño fluido que significaría tener la misma escala de CSS para diferentes tamaños de dispositivo. El segundo enfoque es ligeramente más complejos de diseñar, pero es mucho más flexible de los nuevos dispositivos que puedan surgir en el futuro ..

Fuente

2012-02-16 06:55:27 testndtv

sí, estoy usando consultas de medios CSS para la resolución de 1024X768 y menor. Estoy pensando en hacer la misma apariencia que en la computadora/computadora portátil con el iPad o cualquier dispositivo 10.1. También aplicaré esto cuando tenga la condición para detectar cada dispositivo. – Bert

Ese es el mejor enfoque que tienes cuando piensas en forma realista ... Quiero decir que cada año con tantos dispositivos en el mercado, en lugar de tener que crear CSS por separado para cada uno de los dispositivos, puedes usar un diseño fluido/receptivo y deje que el diseño se escale de acuerdo con el dispositivo en el que se ve en .. – testndtv

veo. es absolutamente correcto debido a la diferente resolución del dispositivo que hace que sea más difícil para el desarrollador web editar el archivo css para adaptarlo al dispositivo, es mejor usar un estilo fluido para usarlo en el futuro. – Bert

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
<meta name="HandheldFriendly" content="true"/> 
<meta name="MobileOptimized" content="320"/> 
<meta http-equiv="cleartype" content="on" /> 


use this code on your website under <header> tag.

Este es el código para la detección de dispositivos móviles.

function isMobile() { 

// Check the server headers to see if they're mobile friendly 
if(isset($_SERVER["HTTP_X_WAP_PROFILE"])) { 
    return true; 
} 

// If the http_accept header supports wap then it's a mobile too 
if(preg_match("/wap\.|\.wap/i",$_SERVER["HTTP_ACCEPT"])) { 
    return true; 
} 

// Still no luck? Let's have a look at the user agent on the browser. If it contains 
// any of the following, it's probably a mobile device. Kappow! 
if(isset($_SERVER["HTTP_USER_AGENT"])){ 
    $user_agents = array("midp", "j2me", "avantg", "docomo", "novarra", "palmos", "palmsource", "240x320", "opwv", "chtml", "pda", "windows\ ce", "mmp\/", "blackberry", "mib\/", "symbian", "wireless", "nokia", "hand", "mobi", "phone", "cdm", "up\.b", "audio", "SIE\-", "SEC\-", "samsung", "HTC", "mot\-", "mitsu", "sagem", "sony", "alcatel", "lg", "erics", "vx", "NEC", "philips", "mmm", "xx", "panasonic", "sharp", "wap", "sch", "rover", "pocket", "benq", "java", "pt", "pg", "vox", "amoi", "bird", "compal", "kg", "voda", "sany", "kdd", "dbt", "sendo", "sgh", "gradi", "jb", "\d\d\di", "moto"); 
    foreach($user_agents as $user_string){ 
     if(preg_match("/".$user_string."/i",$_SERVER["HTTP_USER_AGENT"])) { 
      return true; 
     } 
    } 
} 

// Let's NOT return "mobile" if it's an iPhone, because the iPhone can render normal pages quite well. 
if(preg_match("/iphone/i",$_SERVER["HTTP_USER_AGENT"])) { 
    return false; 
} 

// None of the above? Then it's probably not a mobile device. 
return false; 
} 
    if (isMobile()) { 
    header("location:$mobile"); 
    // if the function returned true, it's a mobile. 
    //echo "mobile"; // delete this line in your code, and uncomment the next line 
// header('Location: http://www.yoursite.mobi/'); // let's redirect the page to the mobile site 

    }

Espero que esto te ayude.

Fuente

2012-02-16 07:04:32

busco en la red y vi que la ventana gráfica es para controlar el diseño en el dispositivo móvil. gracias este es lo que se ha perdido ... – Bert

realmente no me gusta 'NO devolvamos" móvil "si es un iPhone' –

-1

Yo uso este:

$mobile= stripos($_SERVER['HTTP_USER_AGENT'], 'mob');

Funciona casi todo el tiempo.

Javascript

var mobile= navigator.userAgent.toLowerCase().indexOf('mob');

-1 si no es móvil; cualquier otro valor si es móvil

Fuente

2016-02-02 05:37:59 JerryWickey

<?php 

$useragent=$_SERVER['HTTP_USER_AGENT']; 

if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|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|phone)|xda|xiino/i',$useragent)||preg_match('/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',substr($useragent,0,4))) 

header('Location: http://detectmobilebrowser.com/mobile'); 

?>

Fuente

2016-08-01 07:50:29

Cómo usar userAgent para detectar dispositivos móviles

Respuesta

Cuestiones relacionadas