• No results found

Common DeviceAtlas Device Characteristics

In document Smartphone. Web Development. Beginning (Page 131-135)

Table 4-2 lists several commonly used device characteristics from the DeviceAtlas device database. You obtain the values of these characteristics for a device using the getProperty, getAllProperties, and getPropertyAs… methods of the Mobi_Mtld_DA_Api object, as demonstrated in the preceding section.

You can find the complete set of DeviceAtlas device characteristics documented at http://deviceatlas.com/properties.

Table 4-2. Common Device Characteristics in DeviceAtlas Device Database

Characteristic Name Type Description

isBrowser boolean Indicates whether the device is a

desktop browser.

vendor string Indicates the brand name of the mobile

device (such as LG, Apple, and Nokia).

model string Indicates the model name of the mobile

device (such as VX9100, iPhone, and N96).

mobileDevice boolean Indicates whether the device is a

recognized mobile device or mobile browser.

markupSupport string Lists the enumerated set of markup

languages supported on the device.

displayWidth integer Gets the screen width. The related

usableDisplayWidth property gets the addressable horizontal pixels in the browser, taking into account padding and scrollbars.

displayHeight integer Gets the screen height. The related

usableDisplayHeight property gets the addressable vertical pixels in the browser, taking into account padding and scrollbars.

<?php

// Define any constants

define("TITLE", "DeviceAtlas Device Info");

// Include our header

require ("../../../includes/header.php");

// Format a boolean capability value function formatBoolean($value) {

return $value ? ("Yes") : ("No");

}

// Format an array capability value function formatArray($value) { $output = "[";

join(',', $value); $output .= "]";

return $output;

}

// Output a capability list item

function writeCapability($name, $value) {

$output = '<li>' . '<span class="capaName">' . $name . '</span>? <span

// Get the user-agent making the HTTP request. This value is used in property lookups

$userAgent = $_SERVER['HTTP_USER_AGENT'];

// Get all DeviceAtlas properties for the device.

$props = Mobi_Mtld_DA_Api::getProperties($tree, $userAgent);

// Show the UA, whether the request originates from a mobile device, and a few browser characteristics

?>

<p>DeviceAtlas Device Characteristics</p>

<ul>

<?= writeCapability("User-Agent", $userAgent) ?>

<?= writeCapability("Vendor Name", $props['vendor']) ?>

<?= writeCapability("Model Name", $props['model']) ?>

<?= writeCapability("Desktop Browser", $props['isBrowser']) ?>

<?= writeCapability("Mobile Device", $props['mobileDevice']) ?>

<?= writeCapability("Screen Dimensions", $props['displayWidth'] . ' x ' .

$props['displayHeight']) ?>

<?= writeCapability("Touchscreen", $props['touchScreen']) ?>

<?= writeCapability("Supported Markups", $props['markupSupport']) ?>

<?= writeCapability("Supports HTTPS", $props['https']) ?>

</ul>

<p>Click here to try <a href="4–8.php">the DeviceAtlas switcher</a>.</p>

<?

// Include our footer

require ("../../../includes/footer.php");

?>

Like Listing 4-4, Listing 4-7 contains the formatBoolean, formatArray, and

writeCapability utility functions to format device characteristics for display on the Web page. These functions are not related to the DeviceAtlas API. After the function

declarations, a standard page header is included (which is also unrelated to the DeviceAtlas API). The next two sections of code initialize the DeviceAtlas API and use the Mobi_Mtld_DA_Api::getProperties method to obtain an untyped array of all device characteristic values for the mobile device or desktop Web browser making the Web request. Finally, the $props array of string values is dereferenced repeatedly to obtain the device characteristics.

You can view the results of Listing 4-7 by browsing to

http://learnto.mobi/books/bmwd/04/4–7.php in a desktop or mobile browser.

Figure 4-9 shows the results of Listing 4-7 when impersonating the Nokia N96 and Samsung T919 devices in Firefox. Notice how the device information changes in each screenshot.

Figure 4-9. Screenshots of the Mobile Web Page in Listing 4–7 for the Nokia N96 and Samsung T919 Listing 4-8 is a switcher, a PHP script that uses a HTTP 302 redirect to send desktop and mobile browsers to different destination URLs. Listing 4-8 is similar to Listing 4-5, except that it relies on the DeviceAtlas device database API.

The sample switcher code in Listing 4-8 begins by identifying the redirect targets for desktop and mobile browsers as absolute URLs on the current hostname. Next, the listing initializes the DeviceAtlas PHP API, then uses the DeviceAtlas API to obtain the value of the $isMobileDevice variable, a typed Boolean value for the database

characteristic mobileDevice that indicates whether the value of the User-Agent request header is a mobile device. The HTTP 302 redirect is implemented by checking the value of the $isMobileDevice variable. Finally, Listing 4-8 redirects mobile and desktop browsers to the appropriate location using the Location HTTP response header.

You can see Listing 4-8 in action by browsing to

http://learnto.mobi/books/bmwd/04/4–8.php in a desktop or mobile browser. Notice that the listing implements the following redirect rules:

 Desktop browsers are redirected to

http://learnto.mobi/books/bmwd/04/desktop.php.

 Mobile browsers are redirected to

http://learnto.mobi/books/bmwd/04/mobile.php.

 When a Location response header is used, the body of the HTTP response is blank.

Listing 4-8. Sample Code for DeviceAtlas Switcher

<?php

// This script decides whether the client is a mobile device and redirects to Desktop or Mobile Web content as appropriate.

// The absolute URI redirect location for desktop browsers

$desktopRedirect = "/books/bmwd/04/desktop.php";

// The absolute URI redirect location for wireless browsers

$mobileRedirect = "/books/bmwd/04/mobile.php";

// Initialize DeviceAtlas

include 'deviceatlas/Mobi/Mtld/DA/Api.php';

$tree = Mobi_Mtld_DA_Api::getTreeFromFile("deviceatlas/20091028.json");

// Get the user-agent making the HTTP request. This value is used in property lookups

$userAgent = $_SERVER['HTTP_USER_AGENT'];

// Get all DeviceAtlas properties for the device.

$isMobileDevice = Mobi_Mtld_DA_Api::getPropertyAsBoolean($tree, $userAgent, 'mobileDevice');

// Do the HTTP 302 redirect by adding a response header.

if ($isMobileDevice) {

header("Location: " . $mobileRedirect);

} else {

header("Location: " . $desktopRedirect);

} exit;

?>

Figure 4-10 contains screenshots of Listing 4–8 as seen from Firefox when using the default desktop user-agent and when impersonating the Samsung T919. Notice that the desktop and mobile browsers are identified properly and redirected to the appropriate locations.

Figure 4-10. Screenshots of the Mobile Web Page in Listing 4-8 executed in Firefox and Samsung T919

In document Smartphone. Web Development. Beginning (Page 131-135)