CODEWITHSUNDEEP
mobiledrupal-6responsive-design
jddh
jddh

Reputation: 33

How to detect mobile devices in Drupal 6 theme template?

The challenge in implementing a responsive theme is to only insert the VIEWPORT tag for devices you wish to target. In my case, I want to add the tag for mobile-class devices, but not tablets.

I am trying to accomplish this with a conditional HEAD in the top of my theme template.php: 

if (getIsMobile()) {drupal_set_html_head('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">');}

function getIsMobile()
{
    $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';

    $_isMobile = (isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_PROFILE']) || preg_match($RE_MOBILE, $_SERVER['HTTP_USER_AGENT']));
    return $_isMobile;
}

The string of user agents above intentionally omits iPad.

At first blush, this works OK, but it appears to "time out" in production mode. After some authencated activity like node editing, the VIEWPORT tag ceases to be included when viewing the site on an applicable mobile device. I haven't yet been able to determine the exact conditions under which this occurs, but I suspect this has to do with page caching (which is turned on to "normal"). Flushing all caches fixes the behaviour temporarily.

Can anyone suggest what may be faulty with this approach, or alternate approaches?

Upvotes: 1

Views: 955

Answers (1)

Adam Balsam
Adam Balsam

Reputation: 785

Your suspicions are correct. This has to do with page caching.

With Drupal's page cache set to "normal", each page is built upon the first view by an anonymous user and cached in the {cache_page} table. Subsequent anonymous users viewing the same page are served the page from the cache table until the cache expires.

As a result, if the first anonymous user to visit the Page-X has a user agent on your list, the page will be built and cached with the viewport tag. Subsequent anonymous visitors will be served the page with the viewport tag regardless of their user agent until the cache expires and is rebuilt. Then the process starts over.

The simple answer is to disable the page cache. But I don't recommend that even for very light traffic sites.

A better solution is to move this logic client-side; that is javascript. Assuming jQuery is already loaded, you can use this to append the meta viewport tag for your list of devices:

<head>
  <script>
    if (navigator.userAgent.match(/(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)) {
      $('head').append( '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">' );
    }
  </script>
</head>

The above would go in your theme's page.tpl.php file.

Upvotes: 3

Related Questions