Move or hide regions and blocks in mobile devices

Most of us are painfully aware that Mobile Tools is not ready for Drupal 7 at this time, which leaves us kind of stuck for a general solution for controlling region and block visibility in mobile browsers. After the 476'th feature/support request for this in Adaptivetheme 7.x-3.x I finally relented and at the eleventh hour (its about to be released as stable), I added these features, and more, to be precise.

OK, in a nutshell, you can (via theme settings)...

  • Unset any region when in mobile context, OR...
  • Move all blocks from one region to another when in a mobile context.
  • Test for a mobile context in preprocess/process and templates using $vars['is_mobile'].
  • Requires the Browscap module.

Theme Settings

You will find this under "Extensions" in your sub-themes Appearance settings. Anyone who has used 7.x-3.x will know about Extensions - they are additional features you can toggle on and off. Because this entire feature could be replaced by something much more powerful like Mobile Tools + Browscap + Context or Panels I made it optional.

Testing for a Mobile Context in your Theme

AT Core now includes a new function and variable for testing for a mobile browser context, here's some technical guff for developers and front enders:

at_get_browser() is a wrapper for browscap_get_browser() and will return TRUE or FALSE, TRUE being when a mobile device is detected.

$vars['is_mobile'] is set in hook_preprocess() and is therefor available to all preprocess/process functions and templates to use as a condition.

For example in a template you could do something like this:

  <?php if ($is_mobile == TRUE): ?>
    <p>...holy cow, this is mobile!</p>
  <?php endif; ?>

This is available now from GIT or download 7.x-3.x-dev.

NOTE: if you are looking for a way to show or hide panel panes in mobile, check out this article:

Last updated 9th July, 2012 - 1:20pm

Authored by Jeff Burnz on