Simple Smart Phone detection

Question

Ok I\'ve seen a couple of mobile detection scripts that look to identify all mobile handsets, anyone come up with a simple Smart Phone detection script?

I\'m using t

Answer 1

There are so many different mobile devices and so little standardization, and you probably would need to update your detection script from time to time as well as add new devices to the list. I found that www.handsetdetection.com has pretty complete list of handsets you can download. Also you can use their API for the real time detection on their side. I don't know how it works on your app but I'd recommend to add detection info to your users' cookies in order to make api calls only for the unique devices.

Here is an example how I did this in startup plugin for ZF project

class Application_Plugin_HandsetDetection extends Zend_Controller_Plugin_Abstract
{
public function routeStartup(Zend_Controller_Request_Abstract $request)
{

    $cookies = Zend_Controller_Action_HelperBroker::getStaticHelper('Cookies');
    if ($cookies->isVersion('mobile')) {
        $this->getResponse()->setRedirect($mobile);
    }

    if ($cookies->isVersion('full')){
        return;
    }

    $device = new Application_Service_HandsetDetection();
    if (!$device->isMobile()) {
        $cookies->setVersion('full');
        return;
    }

    $cookies->setVersion('mobile');

    $this->getResponse()->setRedirect($mobile);
}
}

Answer 2

I am not pretty sure if I understand what you are trying to achieve and with "wanted to theme based on device".

So, will you put a BlackBerry logo if the user has a BlackBerry device (so it should be dependent on the manufacturer) or will your web app be denpendent on the screen size? Or depenedent on the features of HTML5/CSS3?

Also in web development I try to do one website for all. The same I do with jQuery Mobile and it works great. I did one design, which works for Opera (Win), Firefox (Win + Mac), IE9, Safari (Win, Mac, iPad), Google Chrome (Win). And I do no CSS hacks! Your web app should be nearly independent of the screen size, I only have css media limitations and some JavaScript functions which design the page.

If you want to check the HTML5 / CSS3 support of the webbrowser, you should never check the mobile device itself, you need to check the function itself. So, bad style is checking if the webbrowser is IE in version 7, 8, 9, because you will never know which function will work in which version. You check the functionality you need. And this can be done with Modernizr:

http://diveintohtml5.ep.io/detect.html#modernizr

http://www.modernizr.com/

Other checks, jQuery can handle it.