Redirect users to mobile view of MediaWiki wiki

Question

I'm currently stuck figuring out how to redirect users on certain devices to the mobile version of my MediaWiki installation. The built-in link (provided by the MobileFrontend extension) used to manually switch views is present at the bottom, but it's tiny and easy to miss.

I first considered doing some kind of user-agent string detection in PHP first (full disclosure: complete PHP noob), but that didn't seem like a good solution for several reasons. First, unless the redirect occurred before anything else on the page was sent, it wouldn't work. Second, user-agent sniffing seemed to be error prone. And, third, I couldn't figure out how or where to insert the code in the MediaWiki installation in the first place. Apparently, Wikipedia uses Varnish to detect mobile users, but I don't have that option (shared hosting), nor would I know how to use it.

The second, and current, solution I've been working on has been to use Javascript to redirect users. The downside is that two pages have to be downloaded - the desktop page and the mobile page. That aside, I've encountered a lot of problems getting it to work right. All the following bits of code were placed in MediaWiki:Common.js, which is loaded for all users on every page load.

1)

if(document.URL.search("mobile") == -1)
{

  if(document.documentElement.clientWidth <= 735)
  {
    window.location.replace(document.URL + "?useformat=mobile");
  }
}

Problem: Switches to mobile view arbitrarily. I double checked the width using Chrome remote debugging on a Nexus 7. Sometimes I would get 980 and sometimes I would get 601 in portrait orientation. When it reported 601, it wouldn't trigger the mobile redirect, but if I opened the same page in Chrome/Firefox/IE on the desktop at the same width, it redirected perfectly.

Using jQuery didn't seem to be an option, because it apparently uses the same method to determine the width.

2)

if(document.URL.search("mobile") == -1)
{
  if( navigator.userAgent.match(/Android/i)
   || navigator.userAgent.match(/webOS/i)
   || navigator.userAgent.match(/iPhone/i)
   || navigator.userAgent.match(/iPod/i)
   || navigator.userAgent.match(/BlackBerry/i)
   || navigator.userAgent.match(/Windows Phone/i))
  {
    window.location.replace(document.URL + "?useformat=mobile");
  }
}

Problem: This actually works (although, of course, user-agents not present wouldn't trigger a redirect), but the problem is granularity. For example, I would want the mobile view on my Galaxy Nexus or Nexus 7, but not on a Nexus 10 or Asus Transformer.

3) MobileDetect MediaWiki extension

Problem: This extension hasn't been updated since 2010, though it might still work fine. Apart from that, detecting mobile devices in PHP is great, but the problem of not wanting to serve larger tablet users the mobile site is still present. Also, as ridiculous as it sounds, I couldn't even figure out what the name of the mobile skin is (or if it is a skin), or how to switch to the mobile view if the extension detected a mobile device (since it would be too late to perform a PHP redirect).

I tweaked little bits here and there while experimenting, but the core ideas were always either width detection or user-agent sniffing. Using the width to redirect users would be great, but it seems so finicky that I can't trust it. I even ended up in situations where my phone or tablet would display the desktop version and the desktop browsers would only display the mobile version (this was with detectmobilebrowsers.com's functionality; I had to disable Javascript just to remove the offending code from Common.js).

There has got to be some fairly straightforward way to redirect phone and small tablet users to the mobile view of a wiki. Have I simply made a mistake in one of my solutions or is there another way to do this?

Answer 1

If you are using the MobileFrontEnd Extension to show the mobile version of Mediawiki, then you can set the

$wgMFAutodetectMobileView = true;

in your LocalSettings.php file below your include to the MobileFrontend include.

The only downside of this is you will not be able to use FileCaching since the mobile will pickup the last stored pages from the cache.

Answer 2

I decided to go with the user-agent method. I'm sure it won't catch everything under the sun, but it should catch the majority of devices that might access the site. The code is the following:

if(document.URL.search("mobile") == -1)
{
  var ua = navigator.userAgent;

  if(ua.match(/Android/i))
  {
    if(ua.match(/Mobile/i))
    {
      window.location.replace(document.URL + "?useformat=mobile");
    }
  }
  else if((/webos|iphone|ipod|blackberry|windows phone|bada/i).test(ua))
  {
    window.location.replace(document.URL + "?useformat=mobile");
  }
}

Phones will get the mobile view and tablets, desktops, and other devices will get the desktop view - distinguishing between medium- and large-sized tablets was simply too problematic. There's still the downside of phones having to load two pages instead of one, but the wiki is not particularly media-heavy. Note that the above code seems to correctly catch the mobile view of Amazon's Silk browser on the Kindle Fire, too (see here).

This question has some more detail for regarding the detection of mobile browsers and this one explains how to distinguish between Android phones and tablets. Even though I couldn't get it to work reliably in my case, this answer had an interesting method of distinguishing between phones, tablets, and desktops using an em-based media query.