PhoneGap - Detect device type in phonegap

I'm building an application in phonegap for the three different platforms: Android, iOS And Blackberry. While doing so, I have to detect the device type so that I can manage the height and width of my app on different platforms and for different devices like Android Phone, Android Tablet, iPhone, iPad and Blackberry...

New in Phonegap, and simplest, is that you can use the device.platform:

// Depending on the device, a few examples are:
//   - "Android"
//   - "BlackBerry"
//   - "iOS"
//   - "webOS"
//   - "WinCE"
//   - "Tizen"
//   - "browser"
var devicePlatform = device.platform;

if you want to get device type before onDeviceReady, you can get like this.

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);

cordova.platformId 
// "android"

you can use device.name property to get the detailed info about the device.

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

or to get only the platform you can use device.platform property.

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

use this code as ur html file

<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     + '<br />' + 
                        'Device PhoneGap: ' + device.phonegap + '<br />' + 
                        'Device Platform: ' + device.platform + '<br />' + 
                        'Device UUID: '     + device.uuid     + '<br />' + 
                        'Device Version: '  + device.version  + '<br />';
}

</script>

Loading device properties...

i suggest u to check this in device Best Of Luck Aamirkhan I.

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

There are several methods to get device infos from phonegap.

An other option is to have a look at the browser type. (IE = WP7, Safari = iOS,...)

I'm not sure if you will be able to detect if you are at an Android phone or tablet... Anyway your html apps should be able to handle any screen resolution. You can have different resolutions at the phones also!

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

If you need this information because you're trying to format the screen correctly - you should be using CSS @media queries to determine the appropriate screen layout and apply CSS accordingly.

Use Google to find info on "responsive design with CSS"

i would certainly NOT use the device type when laying out a page, the layout should be based on screen size only

you can use the javascript properties:

width = window.innerWidth
height = window.innerHeight

or use CSS:

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

see vmin,vmax, vh, vw