What is MobileDetect?
MobileDetect is a free PHP script and a free API you can use to add mobile detection to your mobile pages. With MobileDetect you instantly gain access to crucial information like screen size, browser, file format support and much more. Once you get the data you need, you can build dynamic mobile pages and make sure they will be displayed correctly on any mobile screen.MobileDetect, why?
A great majority of mobile phones are still unable to read full internet pages, screens are small, browsers don't support html and networks are slow. There are no standards you can rely on to build your mobile site and building one single generic site for all phone models will lead your customer to disappointment or worse. With mobile detection, you should be able to build dynamic pages taking those mobile restrictions away. If you know that a phone has a resolution of 128x160 pixels, it's not a good idea to display a large picture. That's where mobile detection can help you by providing the information you need to make sure your pages will be optimized for every mobile phone.
How does it work?
MobileDetect works in a very simple way. You need to build a POST request and send HTTP headers to the API url. In return you will receive a string containing the information you need. If you're not familiar with these terms, don't panic, MobileDetect is designed in a very simple way. You don't need to be a IT specialist, some basic programming knowledge is more than enough.
Here is a summary of what you need to do:
- register to MobileMultimedia to obtain your login and password (it's free)
- collect HTTP headers data: HTTP_USER_AGENT, HTTP_X_WAP_PROFILE and HTTP_ACCEPT.
- build your POST request and send it to http://www.mobilemultimedia.be/api/mobiledetect.php
- variables that need to be send to the API are: uag, uap, acc, login, password, email.
- collect & parse the string you get in return
Here is a sample in PHP that can help you to send the appropriate data to MobileDetect:
You can copy & paste the following PHP code in your pages without changing anything except your login/password/email and you will get in return the data you see on your right.
// ---------------------------------------
// API URL
// ---------------------------------------
$url="http://www.mobilemultimedia.be/api/mobiledetect.php";
// ---------------------------------------
// Collecting mandatory data
// ---------------------------------------
$user_agent=$_SERVER['HTTP_USER_AGENT'];
$uaprof=$_SERVER['HTTP_X_WAP_PROFILE'];
$accept=$_SERVER['HTTP_ACCEPT'];
// ---------------------------------------
// Member information
// fill in your credentials
// ---------------------------------------
$login="Your login " ;
$password="Your password ";
$email="Your e-mail ";
// ---------------------------------------
// POST request building with cURL
// Make sure your PHP server allows cURL
// ---------------------------------------
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_POST, 1);
// Parameters must be separated by a &
curl_setopt($ch, CURLOPT_POSTFIELDS,"login=$login&password=$password&uag=$user_agent
&uap=$uaprof&acc=$accept&email=$email");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// ob_start/end to avoid displaying results on the screen
ob_start();
$result= curl_exec ($ch);
// return string in available in the variable $content
$content = curl_multi_getcontent ($ch);
ob_end_clean();
curl_close ($ch);
Do you want a real life working example? Check out the WAP section of this site where you will be able to download the free wap toolkit with free sample code to help you building a mobile site with MobileDetect
Sample
In return of your POST request you will receive a text string like the following one:brand::Samsung##model::Z630##browser::NetFront##browserversion::3.3##
resolution::240x320##xhtmlversion::1.0##htmlversion::4.0##wapversion::2.0
##javaplatform::CLDC1.1##accept_types::text/vnd.wap.wml,text/xml,
application/vnd.wap.wmlc,application/vnd.wap. wbxml,application/vnd.wap.
wmlscriptc,application/vnd.wap.xhtml+xml,text/html,text/plain,text/css,
application/wml+xml,application/xhtml+ xml,multipart/mixed,application/vnd.
wap.multipart.mixed,image/vnd.wap.wbmp,image/gif,image/jpeg,image/png,
image/bmp,image/jpg, audio/midi,audio/mid,audio/x-midi,audio/sp-midi,audio/
mmf,audio/x-iMelody,audio/iMelody,audio/amr,audio/x-amr,application/vnd.smaf,
application/x-smaf,text/x-iMelody,audio/mpeg4,audio/mp4,audio/3gpp,audio/wav
,audio/x-wav,video/h263,video/mpeg,video/x-vp-mp4, video/3gpp,video/3gp,
video/mpeg4,video/mp4,video/x-mp4,application/sdp,application/vnd.oma.dd+xml,
text/vnd.sun.j2me.app-descriptor,application/vnd.oma.drm.message,application/
vnd.oma.drm.content,application/vnd.oma.drm.rights+xml,application/vnd.oma.drm.
rights+ wbxml,text/vnd.wap.connectivity-xml,application/vnd.wap.connectivity-wbxml## login::Login and Password ok##UAprof::UAprof found, downloading data##status::Detection done##
As you can see, every element is separated with ## and every element contains a label and a value separated with ::
You will need to parse this text string to obtain labels and their respective values in order to use them in your code.
Example:
resolution:: 240x320
=> indicates the screen resolution (width x height) separated with a x
Let's have a look at the other variable labels:
brand: text string with all brands available on this site
model: text string with all models available on this site
browser: text string with all browser brands available (netfront,obigo,...)
browserversion: software version for every browser
resolution: width x height
wapversion: usually 1.x (WML browsers) and 2.x (xHTML browsers)
xhtmlversion: empty (1458) ,XHTML-Basic/1.0 (2) 1.0 (1354) 1.0,1.0 (2) 1.1 (664) 1.1,1.1 (13) 1.2 (9) 1.2.1 (15) 2 (1) 2.0 (223) basic 1.0 (7) L-Basic/1.0 (1) XHTML Mobile Profile (1) XHTML-Basic/1.0 (88) XHTML-Basic/1.1 (7) XHTML-Mobile11 (1) XHTML-MP (2)
htmlversion: empty (2233) 4.0 (1) 1.0 (41) 2.0 (4) 3.2 (46) 4 (3) 4.0 (688) 4.0.1 (94) 4.01 (404) 4.01,4.01 (13) 4.1 (219) i-mode HTML 3.0 (2) N/a (6) None (94)
javaplatform: text strings with all available java platform, there are hundreds of them.
accept_types: all accept/mime types you may imagine
You will also receive a couple of indicators after those variables indicating if any problem occured during the transaction and where the problem occurred (login, uaprof, ...)
Which variables should you absolutely use ?
Screen size and wapversion are definitely the most important ones to start with. With those two variables you can already create handset groups like the following ones:
Old handsets (WML only): wapversion = 1.x and screen width<128px
Low end xHTML: wapversion = 2.x and screen width<128px
Mid end xHTML: wapversion = 2.x and screen width between 150 and 240px
High end xHTML: wapversion = 2.x and screen width above 240px
Depending on your priorities and objectives, you may want to go beyond the use of those two variables. The best detection should then be based on the browsername and version, this would allow you to create a page set for every possible browser and make sure those pages are working fine for all of them. This process is tedious but will allow you to build the perfect mobile rendering engine.
Last visitors seen on MobileDetect
2010-02-09 - 03:54:57:BlackBerry8800/4.2.1 Profile/MIDP-2.0 Co...
2010-02-09 - 03:26:16:
LG-KE970 MIC/1.1.14 MIDP-2.0/CLDC-1.1...
2010-02-09 - 03:24:22:
LG-KE970 MIC/1.1.14 MIDP-2.0/CLDC-1.1...
2010-02-09 - 03:22:51:
LG-KE970 MIC/1.1.14 MIDP-2.0/CLDC-1.1...
2010-02-09 - 02:27:16:
Nokia1680c-2/2.0 (05.61) Profile/MIDP-2....
2010-02-09 - 02:16:19:
SonyEricssonW910i/R1EC Browser/NetFront/...
2010-02-09 - 02:14:24:
SonyEricssonW910i/R1EC Browser/NetFront/...
2010-02-09 - 01:34:41:
BlackBerry9000/4.6.0.297 Profile/MIDP-2....
2010-02-09 - 01:22:26:
BlackBerry9000/4.6.0.297 Profile/MIDP-2....
2010-02-09 - 01:22:01:
BlackBerry9000/4.6.0.297 Profile/MIDP-2....
2010-02-09 - 01:03:11:
Nokia3120classic/2.0 (07.16) Profile/MID...
2010-02-09 - 00:44:57:
Nokia6230i/2.0 (03.88) Profile/MIDP-2.0 ...
2010-02-09 - 00:44:54:
Nokia3120classic/2.0 (07.16) Profile/MID...
2010-02-09 - 00:44:49:
Nokia3120classic/2.0 (07.16) Profile/MID...
2010-02-09 - 00:41:42:
SAMSUNG-SGH-J700i/J700IXAIE1 Profile/MID...
2010-02-09 - 00:41:30:
SAMSUNG-SGH-J700i/J700IXAIE1 Profile/MID...
2010-02-09 - 00:41:14:
SAMSUNG-SGH-J700i/J700IXAIE1 Profile/MID...
2010-02-09 - 00:40:53:
SAMSUNG-SGH-G600/G600XAHJ1 NetFront/3.4 ...
2010-02-09 - 00:40:32:
SonyEricssonK530i/R6BC Browser/NetFront/...
2010-02-09 - 00:28:13:
SAMSUNG-SGH-G600/G600XAHJ1 NetFront/3.4 ...
MobileDetect Toolkit
The MobileDetect toolkit is basically a zip file containing ready to use PHP scripts you can copy/paste in your code. The only thing you'll have to do is fill in your MobileMultimedia login and password.The toolkit contains the following elements:
- mobile page models in WML and xHTML
- mobile detection / redirection script based on the MobileDetect free API
- a script that dynamically resizes pictures
- suggestions
- documented code
Download MobileDetect WAP toolkit
Need help?
Check the mobile development help page, you'll find some tips to help you in your project.For any question regarding MobileDetect, please use the contact form.