PhoneGap - Detecta el tipo de dispositivo en phonegap

Estoy construyendo una aplicación en phonegap para las tres plataformas diferentes: Android, iOS y Blackberry. Mientras lo hago, tengo que detectar el tipo de dispositivo para poder administrar el alto y el ancho de mi aplicación en diferentes plataformas y para diferentes dispositivos como Android Phone, Android Tablet, iPhone, iPad y Blackberry ...

48
¿realmente desea detectar el tamaño del modelo para determinar el tamaño de la pantalla? De Verdad ??
agregado el autor Martijn Scheffer, fuente

9 Respuestas

Lo nuevo en Phonegap, y lo más simple, es que puedes usar device.platform:

// Depending on the device, a few examples are:
//   - "Android"
//   - "BlackBerry"
//   - "iOS"
//   - "webOS"
//   - "WinCE"
//   - "Tizen"
//   - "browser"
var devicePlatform = device.platform;
92
agregado
Actualmente, solo el complemento cordova agrega cordova-plugin-device
agregado el autor Victor Sergienko, fuente
Me aparece "¡Sin proveedor para el dispositivo!" error. ¿Algunas ideas?
agregado el autor Marc-André Therrien, fuente
Si encuentra que el "dispositivo" no está definido, entonces probablemente esté usando una versión más nueva de Phonegap/Cordova, lo que significa que necesita instalar el complemento. Esto se puede encontrar aquí, git-wip-us. apache.org/repos/asf/cordova-plugin-device.git e instalado por $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova- plugin-devic & zwnj; por ejemplo, o cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-
agregado el autor Ian Jamieson, fuente

si desea obtener el tipo de dispositivo antes de enDeviceReady, puede obtenerlo de esta manera.

var deviceType = (navigator.userAgent.match(/iPad/i))  == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i))  == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";

alert(deviceType);
54
agregado
para Android, puede usar navigator.userAgent.toLowerCase (). includes ("android")
agregado el autor João Pimentel Ferreira, fuente
navigator.userAgent.match (/ epad/i)) == "epad"? "epad" He puesto esta condición en el código que me proporcionas ... Pero no es weorking ...
agregado el autor Preet_Android, fuente
Muchas gracias señor ... Pero el problema es que no puede detectar la tableta/epad de Android. Entonces, ¿pueden ayudarme cómo puedo hacer esto? Muestra el tipo de epad como el android. Muchas gracias por adelantado.
agregado el autor Preet_Android, fuente
agregado el autor Preet_Android, fuente
Mozila/5.0 (Linux; U; Android 4.0.3; en-us; Transformerr TF101 Build/IML74k) AppleWebKit/534.30 (KHTML, como Gecko) Versión/4.0 Safari/534.30 Este valor se muestra en la alerta.
agregado el autor Preet_Android, fuente
solo tiene que registrar la secuencia de userAgent para la tableta/epad de Android. use console.log (navigator.userAgent); y comprueba qué devuelve y pone la condición de acuerdo con la cadena.
agregado el autor JDev, fuente
en mi caso realicé alguna operación si deviceType es "nulo". es por eso que he asignado null como cadena.
agregado el autor JDev, fuente
Intente alertar (navigator.userAgent) y muéstreme qué obtuvo para epad de Android.
agregado el autor JDev, fuente
Puede ser que sea así "Mozilla/5.0 (Linux; U; Android 3.2.1; de-de; EPAD Build/HTK75) AppleWebKit/534.13 (KHTML como Gecko) Versión/4.0 Safari/534.13" para Android epad para que usted puede usar como navigator.userAgent.match (/ epad/i)) == "EPAD"
agregado el autor JDev, fuente
¿Por qué querría establecer deviceType en la cadena "null" ?
agregado el autor briangonzalez, fuente
La solución de Sindre es mucho más limpia. $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-devic‌ e.git
agregado el autor Ian Jamieson, fuente
cordova.platformId 
// "android"
29
agregado
Esto es perfecto. No es necesario un complemento.
agregado el autor Jake, fuente
Esta es una solución más confiable que la respuesta de JDev.
agregado el autor Design by Adrian, fuente
¿Conoces una lista de valores posibles? Quiero aplicar cierta configuración dependiendo de la plataforma, pero no sé si será "iOS" o "iOS" o "iPhone" o "iSmugface".
agregado el autor Roel, fuente
@Roel Esto es sólo una suposición, pero como cordova.platformVersion se refiere a la versión de la plataforma cordova no a la versión del dispositivo, creo que cordova.platformId es coherente con el nombre de la carpeta en las plataformas. Entonces, para ios, sería "ios"
agregado el autor csga5000, fuente

puede usar la propiedad device.name para obtener la información detallada sobre el dispositivo.

    function onDeviceReady() {
    var name=device.name ;
       }

o para obtener solo la plataforma, puede usar la propiedad device.platform.

    function onDeviceReady() {
    var name=device.name ;
    var plat=device.platform;
       }
5
agregado
Muchas gracias ... Pero aquí quiero el tipo de dispositivo. O bien es un teléfono Android o una plataforma de Android. Y lo mismo en tha cas de iPhone. Significa que es un iPhone o iPad. porque mi aplicación es para la plataforma de tres. 1. Android 2. Blackberry y 3. iPhone/iPad.
agregado el autor Preet_Android, fuente

usa este código como tu archivo html

Ejemplo de propiedades del dispositivo

<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">

// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
//
function onDeviceReady() {
    var element = document.getElementById('deviceProperties');

    element.innerHTML = 'Device Name: '     + device.name     + '
' + 'Device PhoneGap: ' + device.phonegap + '
' + 'Device Platform: ' + device.platform + '
' + 'Device UUID: ' + device.uuid + '
' + 'Device Version: ' + device.version + '
'; } </script>

Cargando las propiedades del dispositivo ...

Te sugiero que verifiques esto en el dispositivo La mejor de las suertes Aamirkhan I.

3
agregado

CIERTAMENTE NO usaría el tipo de dispositivo al diseñar una página, el diseño debería basarse solo en el tamaño de la pantalla

puedes usar las propiedades de JavaScript:

width = window.innerWidth
height = window.innerHeight

o usa CSS:

.element{   
    height: 50vh;  //(height = 50 percent of screen)
}

ver vmin, vmax, vh, vw

2
agregado
La pregunta es cómo detectar un tipo de dispositivo. No respondiste la pregunta
agregado el autor Pier, fuente
¿eh? sí lo hace!, él quiere detectar el dispositivo, luego tiene una mesa con tamaños codificados para cada modelo!, eso es simplemente incorrecto!, su verdadera pregunta no es cómo detectar el modelo, sino cómo detectar el tamaño del dispositivo. pantalla, por lo que mi respuesta es correcta, y cualquier persona que realmente esté de acuerdo con la idea de usar un modelo de dispositivo para determinar el tamaño de la pantalla no lo está.
agregado el autor Martijn Scheffer, fuente
la pregunta es cómo detectar el tipo de dispositivo para INFER el tamaño de la pantalla, ¡simplemente está mal! ¡, léalo de nuevo! Cualquiera que rechace esta respuesta alienta a alguien a escribir un código que no se escale bien y se rompa. "Tengo que detectar el tipo de dispositivo para poder gestionar el alto y el ancho de mi aplicación". ¿No está claro?
agregado el autor Martijn Scheffer, fuente
¡la pregunta NO es que solo quiere saber el tipo de dispositivo!
agregado el autor Martijn Scheffer, fuente
sí lo hice, la cuestión es detectar el dispositivo PARA CONOCER EL TAMAÑO DE LA PANTALLA !!, está totalmente equivocado. "Tengo que detectar el tipo de dispositivo para que pueda gestionar el alto y el ancho de mi aplicación en diferentes plataformas" No debería ser rechazado, leer su pregunta nuevamente, lo que quiere hacer es incorrecto.
agregado el autor Martijn Scheffer, fuente
Buenos puntos, pero no responde la pregunta que se hizo.
agregado el autor Priidu Neemre, fuente

You can have a look at the following link: http://docs.phonegap.com/en/1.0.0/phonegap_device_device.md.html

Hay varios métodos para obtener información del dispositivo de phonegap.

Otra opción es echar un vistazo al tipo de navegador. (IE = WP7, Safari = iOS, ...)

No estoy seguro de si podrá detectar si está en un teléfono o tableta Android ... De todos modos, tus aplicaciones html deberían ser capaces de manejar cualquier resolución de pantalla. ¡También puede tener diferentes resoluciones en los teléfonos!

1
agregado
function onDeviceReady()
{
// ***IMPORTANT: access device object only AFTER "deviceready" event    
document.getElementById("name").innerHTML = device.name;
document.getElementById("pgversion").innerHTML = device.cordova ? device.cordov:device.phonegap;
document.getElementById("platform").innerHTML = device.platform;
document.getElementById("uuid").innerHTML = device.uuid;
document.getElementById("version").innerHTML = device.version;

}

See Here for device.platform

0
agregado
device.platform devuelve "Android" en el emulador de Android. En realidad, no verifico el dispositivo real, pero sé que esto le dará un resultado fructífero.
agregado el autor vikky, fuente
Muchas gracias ... Pero aquí quiero el tipo de dispositivo. O bien es un teléfono Android o una plataforma de Android. Y lo mismo en tha cas de iPhone. Significa que es un iPhone o iPad. porque mi aplicación es para la plataforma de tres. 1. Android 2. Blackberry y 3. iPhone/iPad.
agregado el autor Preet_Android, fuente

Si necesita esta información porque está tratando de formatear la pantalla correctamente, debe usar CSS @media queries para determinar el diseño de pantalla apropiado y aplicar CSS en consecuencia.

Use Google para buscar información sobre "diseño receptivo con CSS"

0
agregado