Post
Ask Question

How to Get the Device Information in PhoneGap

Introduction

In this article I will discuss device information in Apache Cordova. The device object describes the device's hardware and software information. Their are many properties of devices. I will explain all of them in this article.

Device.name

It is used to get the name of the device's model or the product. The supported platforms are Android, BlakBerry Webworks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango), Bada 1.2 & 2.x and webOS. The syntax for using this is:

var string = device.name;

Device.cordova

It is used to get the version of Cordova that is running on the device. The supported platforms are Android, BlakBerry Webworks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango) and Bada 1.2 & 2.x. The syntax for using this is:

var string = device.cordova;

Device.platform

It is used to get the operating system name of the device. The supported platforms are Android, BlakBerry Webworks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango), Bada 1.2 & 2.x and webOS. The syntax for using this is:

var string = device.platform;

Device.uuid

It is used to get the UUID (Universally Unique Identifier) of the device. The supported platforms are Android, BlakBerry Webworks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango) and Bada 1.2 & 2.x and webOS. The syntax for using this is:

var string = device.uuid;

Device.version

It is used to get the version of the operating system. The supported platforms are Android, BlakBerry Webworks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango), Bada 1.2 & 2.x and webOS. The syntax for using this is:

var string = device.version;

Example

In order to work with it use the following steps:

Step 1 : Open Visual Studio and press File -> New -> Project:

image1.gif

Step 2 : A dialog box is shown; from this select Silverlight for Window Phone inside the Visual C# and select the CordovaStarter and click ok after giving the name and location:

image2.gif

Step 3 : Inside the www folder in the Solution Explorer select the index.html file:

image3.gif

Step 4: Write the following code in the index.html:

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>Device Information Example</title>

    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"charset="utf-8" />

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

    <script type="text/javascript" charset="utf-8">

        // Cordova is loading.....

        document.addEventListener("deviceready", onDeviceReady, false);

        // Now the Cordova is ready       

        function onDeviceReady()

         {

            var element = document.getElementById('deviceProperties');

            element.innerHTML = 'Device Name: ' + device.name + '<br />' +'<br/>'+

                                'Device Cordova: ' + device.cordova + '<br />' + '<br/>' +

                                'Device Platform: ' + device.platform + '<br />' + '<br/>' +

                                'Device UUID: ' + device.uuid + '<br />' + '<br/>' +

                                'Device Version: ' + device.version + '<br />' + '<br/>';

         }  

    </script>

</head>

<body>

    <p id="deviceProperties">Loading device properties...</p>

</body>

</html>

 

Step 5 : Now Run the application by pressing F5.

 

First, the Emulator is loaded, like this:

image6.gif

 

Then the device information is displayed like this:

 

output.gif

 

Summary : In this article I discussed how we get the device information by using the device object in Apache Cordova.


Similar Articles