PDA

View Full Version : Detecting a mobile device



franklt69
23 Jun 2010, 9:04 AM
Hi I have a web site and I want to detect the device used for the user end to redirect, for instances I have my site:
www.site.com if the user is a desktop pc I will show www.site.com but if the user is in an iphone, ipad I would like to redirect to mobile.site.com (here will be sencha touch app) is possible that, which is the better approach ?

regards
Frank

mrsunshine
23 Jun 2010, 9:11 AM
you can check the kind of user on server or browser side, on browser site you can for example write a litte sencha touch script and include it on you main site www.site.com


if (Ext.platform.isPhone || Ext.platform.isTablet) {
location.href = 'http://mobile.site.com';
}

izoelkantor
23 Jun 2010, 9:28 AM
:D hi Mrsunshine, thank you for the information, because it is useful for me, on redirect in mobile phone, with app sencha..by internet marketing (http://www.asianbrain.com)

aw1zard2
23 Jun 2010, 9:36 AM
Here is the back end code we use we have a lot more tweaks to the regex I will try and get the latest copy of it and post it. :D


<?PHP
function isMobile(){
$regex_match="/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|";
$regex_match.="htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|";
$regex_match.="blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|";
$regex_match.="symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|";
$regex_match.="jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220";
$regex_match.=")/i";
echo '<pre>';
print_r(preg_split($regex_match, strtolower($_SERVER['HTTP_USER_AGENT'])));
echo '<br />';
print_r($_SERVER);
echo '</pre><br />WAP '.$_SERVER['HTTP_X_WAP_PROFILE'].'<br />Profile '.$_SERVER['HTTP_PROFILE'].'<br />Agent '.$_SERVER['HTTP_USER_AGENT'].'<br />';
return isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']));
}
echo 'TEST '.isMobile();
?>

franklt69
23 Jun 2010, 10:27 AM
I have this doubt yet, www.site.com is using Ext.core and following this approach I have to add 80K more to only detect the device?, I mean I have to add ext-touch.js to set
if (Ext.platform.isPhone || Ext.platform.isTablet) {
location.href = 'http://mobile.site.com';
}

regards
Frank

aw1zard2
23 Jun 2010, 10:39 AM
Frank,

My group has been using both on one site url.
If the mobile side is detected it loads the Sencha Touch, otherwise unknown devices or desktops get the EXT JS website.

Currently we haven't released anything for mobile yet until the commercial license comes out but my website knows which library to load before anything gets loaded using the regular expression I posted above. We store a lot of configurations in a database table for the mobile side and various screen sizes. The Ext JS side is more dynamic on resolution sizing with multiple target ratios to fit the screen resolutions of tablets, netbooks, laptops, all-in-ones, and desktops. Since Sencha Touch is more towards IPhone and Android we only filter mobile devices that use those. The rest of the mobile devices get a generic text message saying device not supported and an email with device specs are sent to our development team. I can give a bit more info if you would like.

franklt69
23 Jun 2010, 11:01 AM
Thanks aw1zard2, could you give me more information, because using the redirect in the client side is not working and I don't like to add 80k more to detect the mobile, I just begin a little with sencha-touch and I did it:



<script type="text/javascript" src="ext-touch-debug.js" > </script >
<script type="text/javascript" src="mobile.js" > </script >
<script type="text/javascript" src="Ext.core.js"></script>

mobile.js:

Ext.setup({
onReady: function() {
if (Ext.platform.isPhone || Ext.platform.isTablet) {
location.href = 'http://mobile.site.com';
}

}
});

and I get this error with firebug:

Ext.TouchEventManager is undefined
http://www.mysite.com/ext-touch-debug.js
Line 2612


regards
Frank

aw1zard2
23 Jun 2010, 11:06 AM
What back end are you using php, asp, jsp, or html? Cause using the back end to determine would be the easiest.

We use php to handle our website.

Let me know.

Thanks.

franklt69
23 Jun 2010, 11:18 AM
I was using php and asp.net

regards
Frank

aw1zard2
23 Jun 2010, 11:25 AM
In the code snippet I posted above is in my functions.php for my site it doesn't load any ext js libraries at all until it knows if a mobile device is attached. Then it includes the correct layout config for the device whether it be desktop/tablet, mobile device, or not supported.

In the various configs I setup a common defined variable name jsLib. Then use that across my app when needed. Same with database info to lookup any extra config settings for the mobile devices.

My index.php file is below.


<?PHP
require_once("functions.php");

if(isMobile() && isWebkit()) {
include("mobileconfig.php");
} else if (!isMobile()) {
include("desktopconfig.php");
} else {
include("notsupported.php");
}
include("app.php");
?>

mrsunshine
23 Jun 2010, 1:12 PM
Thanks aw1zard2, could you give me more information, because using the redirect in the client side is not working and I don't like to add 80k more to detect the mobile, I just begin a little with sencha-touch and I did it:



<script type="text/javascript" src="ext-touch-debug.js" > </script >
<script type="text/javascript" src="mobile.js" > </script >
<script type="text/javascript" src="Ext.core.js"></script>

mobile.js:

Ext.setup({
onReady: function() {
if (Ext.platform.isPhone || Ext.platform.isTablet) {
location.href = 'http://mobile.site.com';
}

}
});

and I get this error with firebug:

Ext.TouchEventManager is undefined
http://www.mysite.com/ext-touch-debug.js
Line 2612


regards
Frank

if you already use ext.core you can't use sencha tuch also, cause this will produce namespace conflicts.
if you already use ext.core on your normal site and want to check is request normal site and want to check if you have to redirect to your mobile site with JS and not with PHP, you can easily write your own mobile detection functions and use them wit ext core and than redirect to you sencha mobil app.

detecting for phones for example you can write in 3 lines



var isPhone = function() {
return (/android|iphone/i.test(navigator.userAgent.toLowerCase()) && !(/ipad/i.test(navigator.userAgent.toLowerCase())));
};

aw1zard2
23 Jun 2010, 1:16 PM
Why determine it in javascript when php or ASP .NET can decode the userAgent before getting to the client side?

mrsunshine
23 Jun 2010, 1:22 PM
Why determine it in javascript when php or ASP .NET can decode the userAgent before getting to the client side?
i fully agree, i only want to show that its easy to use if needed. Normaly JS Ext.platform helps to differ between the different mobile devices in your mobile application

worthlutz
8 Dec 2013, 6:22 AM
Here is the back end code we use we have a lot more tweaks to the regex I will try and get the latest copy of it and post it. :D


<?PHP
function isMobile(){
$regex_match="/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|";
$regex_match.="htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|";
$regex_match.="blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|";
$regex_match.="symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|";
$regex_match.="jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220";
$regex_match.=")/i";
echo '<pre>';
print_r(preg_split($regex_match, strtolower($_SERVER['HTTP_USER_AGENT'])));
echo '<br />';
print_r($_SERVER);
echo '</pre><br />WAP '.$_SERVER['HTTP_X_WAP_PROFILE'].'<br />Profile '.$_SERVER['HTTP_PROFILE'].'<br />Agent '.$_SERVER['HTTP_USER_AGENT'].'<br />';
return isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']));
}
echo 'TEST '.isMobile();
?>

Is this still the best way to determine what to serve up?

Worth

aw1zard2
10 Dec 2013, 8:28 PM
There might be newer keywords I haven't checked recently.

You can do a search in google or you preferred search engine to find more updated examples.

worthlutz
11 Dec 2013, 6:09 AM
There might be newer keywords I haven't checked recently.

You can do a search in google or you preferred search engine to find more updated examples.

Google was how I found this thread. :D

I'll search around a bit more and see what I find. This seems like the way to go.

Thanks!