• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

Published on Sunday, October 14, 2012

51Degrees.mobi properties in client side script

To get 51Degrees.mobi properties client side by generating dynamic JavaScript from the server using 51Degrees.mobi device detection capability, simply follow the steps of this blog.

Overall the results will be similar to Modernizr, but more efficient as some of the browser's features will have already been detected previously by RingMark, meaning there is a lot less for the device to do. Further, the resulting object will contain properties not possible to detect via the browser such as the physical screen size, the hardware make and model.

The JavaScript will create an object called feature, which exposes the available properties. A full list of properties is available on our Properties Dictionary page. This guide shows usage with our full Premium dataset in use on the server. If Lite data is being used less properties will be available and Premium properties will return undefined in JavaScript.

Step 1: You’ll need to download the 51Degrees.mobi Device Detection API. The latest version can be found here. Although this blog is using the PHP API, the same result is possible with any of our APIs, including Java, .NET and C code.

Step 2: Follow the online installation instructions, available here.

Step 3: In your project, ensure you include:

<?php

include_once('MyFolder/Test/51Degrees.mobi.php');

?>

Replace MyFolder/Test/ with you file path to 51Degrees.mobi.php

Step 4:  The PHP code generates JavaScript, therefore the PHP code is within the script tags. $_51d contains information about the connecting device. 

<div id="output"></div>
<script>
var feature = new Array();
<?php

$invalidChars = array("-", "/"); //Define any invalid charaters
foreach($_51d as $key => $value)

{	 
	//if $invalidChars found within the $key string replace with nothing
	$replacestr = str_replace($invalidChars, "", $key);
	
	if(is_array($value))//Lists are stored as arrays, checking for this
		$finalValue = implode("|", $value); //'glue' properties together and seperate by a "|"
		
	else 
		$finalValue = $value;
	
	echo "feature.$replacestr = '$finalValue';\n"; //print $finalValue as array followed by a new line
}

?> 

document.getElementById("output").innerHTML = feature.HardwareVendor;// anything you want to display as HTML insert here
</script>

Step 5: 51Degrees.mobi has a large catalogue of device properties available for both Lite and Premium users. See the complete list of available device properties here.

To change the property displayed in the browser, simply change feature.HardwareVendor, in the above code, to the name of the property you wish to display. ie To display the ScreenInchesDiagonal of the device the code will look like the following:

document.getElementById("output").innerHTML = feature.HardwareVendor;// anything you want to display as HTML insert here

Finished!

You will now be able to implement 51Degrees.mobi properties in client side script. Below is a snapshort section of the output result. In this case, the 'Samsung Nexus S' is the device detected. 

var feature = new Array();

feature.BitsPerPixel = '16';

feature.HardwareModel = 'Nexus S';

feature.HardwareName = 'GT-I9020T|GT-I9023';

feature.HardwareVendor = 'Samsung';

feature.Has3DCamera = 'False';

feature.Has3DScreen = 'False';

As you can see, the feature array is filled with 51Degrees.mobi properties. These can then be incorporated into your page logic and display.

Comments (0)
Piran Watson
>

Data Team

Other posts by Data Team
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Affiliate Marketing Alcatel Amazon AMP Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS combinations Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Daydream Denver Design Desire Eye Desktop Detection Developers Device Device Data Device Detection Device Intelligence Device Popularity Device property Device Types Device Use Display dmexco DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany git repositories Global Google Google Daydream GSMA HAProxy Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP Huawei HUAWEI. UPDATE HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Leagoo Lenovo LG Location Log File Analysis LTE Lumia Map Memory Meta Data Mi 4S Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Module Motorola MVC4 MWC MWC 2017 MWC16 MyPhone Native Native Apps NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC NGINX Nokia Non-Mobile NVIDIA Omate On7 OnePlus 5 Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic Patent PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images RESS Review reviews RIM Ringmark RWD Samsung Scala Screen Screen resolution Screen Size SEO Server Set Box Set Top Box Sharepoint Shark 1 SHIFT phones Sitecore SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Swedish Beers Symbian Tablet Tablets Tesco Testing Tips Top 5 TOTW TV UDS UK Umbraco Update updates US User Agent UserAgent User-Agent Vendors Version 3 VoLTE VR Wearable Web Web Apps WebKit WebMatrix White Paper Widgets Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE