Mobile Browser Detection

Found this helpful: http://code.google.com/p/php-mobile-detect/

It would be nice to have this in the Yii WebUser object. Though obviously hard to maintain, so I think it’s best to make an extension out of it (a behavior maybe). I already thought about it the other day and I will write one soon. Will also build in support for detection of search engines.

I think CHttpRequest would be more apropriate. The used client is logically not really related to the WebUser object. We could have a CHttpUserClient class to encapsulate browser detection and instantiate it e.g. whenever Yii::app()->request->userClient is called.

Well for my own projects, I thought about something like this since I think it fits well:




Yii::app()->user->isBot

Yii::app()->user->botName

Yii::app()->user->hasMobileDevice

Yii::app()->user->mobileDeviceName



But I like your idea Mike. Obviously you are right that CHttpRequest or a subclass is a better place since CWebUser is a little different (though not really important if implemented as extension). You think this functionality should be in core? I have the feeling an extension is better, because if it’s in core we can’t guarantee to support all bots/devices for example. At least we would have to monitor these methods from time to time in order to make sure new browsers/bots/devices get added. So I guess it’s too much trouble to have it in core.

Good question. There’s already things like HTMLPurifier in the core, so it’s not unusual to have third party stuff included. On the other hand you need a good third party implementation first ;)

I’ve also found this:

http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/

But i don’t like the classname “Browser” which pollutes the global namespace.

In a perfect world we’d have our own Yii implementation of such a detector (which could even “borrow” some code from the libs above). But that takes some effort and requires a maintainer who keeps things up to date.

An extension should also be fine. Even if i never got the point of wrapping third party classes into an extension instead of using the original class right away.

Has there been any progress on this extension?

Digging up this old thread, because today i needed to find out, wether it’s a mobile device that requests our page. I had a look a WURFL but it’s definitely overkill for my requirements (15 MB of XML). I stumbled across a simple regular expression that seems to do the job quite fine.

For simplicity’s sake i’ve included some lines to my base controller in components/Controller.php:




private $_isMobile;


const RE_MOBILE='/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220)/i';


public function getIsMobile()

{

    if ($this->_isMobile===null)

        $this->_isMobile=isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_PROFILE']) ||

            preg_match(self::RE_MOBILE, $_SERVER['HTTP_USER_AGENT']);

    return $this->_isMobile;

}



Now it’s easy to use a different layout for mobile devices:




public function init()

{

    if ($this->getIsMobile())

        $this->layout='//layouts/mobile'

}




Note, that i’ve blatantly stolen the regular expression from here.

Hi Mike, even though there is already a good browser detection (http://www.yiiframework.com/extension/browser) extension that solution of yours is quite good; love its simplicity. Thanks for sharing buddy.

Oh, didn’t notice. It’s actually based on Chris Schuld’s Browser class i’ve mentioned above. Maybe i should give it a try, too.

Thanks for pointing that out, Antonio.

I’ve used Mike’s suggestion above to detect mobile devices and display a mobile version, and it works great. However, I was wondering if there is a way to give mobile users the ability to switch back and forth between the mobile version and the full desktop version. I’ve tried several different things but nothing seems to work.

Thanks!

You can put a button or a link that say "full version/mobile version" and that calls your page with a special parameter like "dev=d" or "dev=m"… then in your code you just check for this parameter before detecting the mobile browser… and if its there put it in session

Thanks for your reply. That’s what I’ve been trying to do, but I can’t get it to work correctly. Instead of changing $this->layout like Mike did above, I created a mobile theme and changed themes with


Yii::app()->theme = 'mobile';

That worked for the initial theme change to the mobile version, but I haven’t been able to get it to switch back based on a user’s input. I’m thinking that the issue is passing parameters to the init() function. Is it even possible to pass parameters to the init() function, or am I going about this the wrong way?

Thanks!

Google / Bing “Responsive Webdesign” - it’s the craze these days.

HTML5 Boilerplate is ready for it, but it’s basically using media queries with a js fallback for older browsers.

There’s no need to maintain a separate mobile version IMO.

Unless, of course, you are targeting older mobiles (WAP).

I found a nice site with lots of mobile detection code and stumbled across this forum post at the same time. I can’t post a link since this is my first forum post but I’m a big fan of Yii and will certainly write my own extension/behavior/whatever. Search “detect mobile browsers open source mobile phone detection” on Google and as of this post that will be the first result. =P

-Zeke

I’ve been on both sides of this, making use of WURFL and writing my own implementation using known types. The first is the most complete and accurate way i’ve found but WURFL really can be a pain to setup. The second method is much easier but will need constant upgrading to keep up to date. I also find these implementations tend to miss out the ipad but on the whole idea of that and more pad devices hitting the market, detected them will be the new goal.

Detect features, not devices.

That how jQuery’s new implementation of browser detection works so that way can work too. However it isn’t always down to features and support being the reason for detection, a lot of people just want different versions of their sites for mobiles and ipad so a mixture of the both is needed.

The big issue when using media queries is that your mobile browser will still load a bunch of resources you don’t need, then hide them using conditional formatting.

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

You base your opinion on a single article?

The answer is: no.

And: yes.

No, because if you design for mobile first and use the right tools, lesser browsers will only receive what they make use of.

Yes, because we still haven’t figured out exactly how to do this just yet.

There’s a lot of research going on, so please don’t make the mistake of thinking you can find the answer by performing a simple Google search…

Brad Frost is one you need to study:

http://bradfrostweb.com/blog/

And this web dev advent calendar also has some really great articles on it:

http://24ways.org/2011

I have been reading into mobile solutions on and off over the past year, but didn’t come across anything convincing yet.

Until the pioneers of the web have figured out how to do this right, I’m sticking with maintaining a separate mobile version (using a different layout or theme to offer the same content). I cannot recommend the use of media queries just for the sake of maintainability.

Ofcourse, we all look forward to more optimized solutions ;)