Making phpBB3 Mobile Compatible

[Alighieri]

I've been working on a way of making phpBB3 completely mobile compatible, regardless of the template or theme.

Because the developers were ingenious enough to implement proper CSS formatting, this is fairly simple. My approach will be to use style.php (which is the #1 resource hog on the server, by the way - it'd be nice if you guys fixed this before 3.0) to determine if the HTTP_HEADER matches a mobile client - and if it does, do not return any stylesheet.

This function will detect most of the possible signs of a mobile client - and will return true (is a mobile) or false (not a mobile) based on this logic.

You can wrap your style.php in a conditional statement based on the result of this function to make your phpBB3 board compatible with mobile devices.

Code: Select all

function detect_mobile_device(){
  // check if the user agent value claims to be windows but not windows mobile
  if(stristr($_SERVER['HTTP_USER_AGENT'],'windows')&&!stristr($_SERVER['HTTP_USER_AGENT'],'windows ce')){
    return false;
  }
  // check if the user agent gives away any tell tale signs it's a mobile browser
  if(eregi('up.browser|up.link|windows ce|iemobile|mini|mmp|symbian|midp|wap|phone|pocket|mobile|pda|psp',$_SERVER['HTTP_USER_AGENT'])){
    return true;
  }
  // check the http accept header to see if wap.wml or wap.xhtml support is claimed
  if(stristr($_SERVER['HTTP_ACCEPT'],'text/vnd.wap.wml')||stristr($_SERVER['HTTP_ACCEPT'],'application/vnd.wap.xhtml+xml')){
    return true;
  }
  // check if there are any tell tales signs it's a mobile device from the _server headers
  if(isset($_SERVER['HTTP_X_WAP_PROFILE'])||isset($_SERVER['HTTP_PROFILE'])||isset($_SERVER['X-OperaMini-Features'])||isset($_SERVER['UA-pixels'])){
    return true;
  }
  // build an array with the first four characters from the most common mobile user agents
  $a = array('acs-','alav','alca','amoi','audi','aste','avan','benq','bird','blac','blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno','ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-','maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-','newt','noki','opwv','palm','pana','pant','pdxg','phil','play','pluc','port','prox','qtek','qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar','sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-','tosh','tsm-','upg1','upsi','vk-v','voda','w3c ','wap-','wapa','wapi','wapp','wapr','webc','winw','winw','xda','xda-');
  // check if the first four characters of the current user agent are set as a key in the array
  if(isset($a[substr($_SERVER['HTTP_USER_AGENT'],0,4)])){
    return true;
  }
}

This is obviously not the GREATEST solution, and special devices (like the every failing Apple iPhone) will likely require a special theme. Rather than using the CSS to style a beautiful page on a really tiny screen, we're going to let the mobile handle it as raw content. Images and embedded objects will still display.

Let me know what you think!

[andymoo]

Nice code, how about a link back to the original author's page though.......

http://www.andymoore.info/php-to-detect-mobile-phones/

That code is free to use on non-commercial sites with a commercial site license costing only £10 per site or £50 for a server-wide license.

[Alighieri]

This is just one solution, you can utilize any number of mobile-detecting functions. Just need to wrap the appropriate code up in style.php.

What has everyone else used to make their forums compatible with mobile devices?

[statm]

One solution we have started implementing is as simple as making a separate template without all the bells and whistles to serve as our mobile phone users.

[Pony99CA]

I use a Windows Mobile Smartphone (an original Motorola Q) and there are a couple of big problems.

First, the block quotations appear all messed up. There are large black left quotes overlaying the text in the quotation. This basically makes any quoted text impossible to read.

Second, the Edit, Report and Quote buttons aren't selectable in the Smartphone browser (I haven't tried on a Pocket PC browser with a touch screen). This obviously means that I can't quote a post, edit one of mine or report somebody's post while mobile.

Are these problems native to phpBB3 or just evident here at phpBB.com? Either way, can they be fixed?

On the plus side, it now appears that I can post from my device. In phpBB2, you couldn't preview or post a comment; pressing the Preview or Submit buttons would just return you to the comment edit window.

Steve

[Pony99CA]

This is just one solution, you can utilize any number of mobile-detecting functions. Just need to wrap the appropriate code up in style.php.

What has everyone else used to make their forums compatible with mobile devices?

What happens if you just use the built-in CSS Handheld media support to turn off styles?

Steve

[careersng]

Can anyone recommend alternative phpBB3 WAP mod?
I would appreciate your response.

REgards
Careersng

[Phil]

You may want to check the MODs in Development Forum and MOD Database, but I'm pretty sure there aren't any. If all else fails, try asking in MOD requests.

[ElbertF]

What happens if you just use the built-in CSS Handheld media support to turn off styles?

Steve

This is what it looks like by default:

[rickyg]

Sorry for the N00B question, what and where do I drop this file? I reallly would like to have a wap for my forum.
Thank you in advance,
RickyG

[dkgibson]

What has everyone else used to make their forums compatible with mobile devices?

Here's what I use:

1. I added the following PHP function:

Code: Select all

function GetDeviceInfo(){
    global $dataBase, $deviceInfo;
//  $agent = htmlentities( @$_SERVER[ 'HTTP_USER_AGENT' ], ENT_QUOTES );
//  $agent = pg_escape_string( @$_SERVER[ 'HTTP_USER_AGENT' ] );
    $agent = addslashes( @$_SERVER[ 'HTTP_USER_AGENT' ] );
    $query = pg_Query( $dataBase,
              "SELECT *  FROM \"UserAgent\"  WHERE '$agent' ~ pattern  LIMIT 1" );
    if ( pg_Num_Rows( $query ) > 0 ){
        $deviceInfo = pg_Fetch_Array( $query );
        $deviceInfo[ 'device_name' ] = ereg_replace( $deviceInfo[ 'pattern' ],
                                                     $deviceInfo[ 'device_text' ],
                                                     $agent );
    }
    if ( ereg( '[ ;]([0-9]{2,4})x([0-9]{2,4})([ ;x)]|$)', $agent, $resolutions ) > 0 ){
        $deviceInfo[ 'horz_resolution' ] = $resolutions[ 1 ];
        $deviceInfo[ 'vert_resolution' ] = $resolutions[ 2 ];
        return TRUE;
    }
    return FALSE;
}

2. I created a SQL table called "UserAgent", defined thusly:

Code: Select all

CREATE          TABLE   "UserAgent"(
    pattern         VARCHAR         PRIMARY KEY,
    is_handheld     BOOLEAN,
    horz_resolution INTEGER,
    vert_resolution INTEGER,
    device_text     VARCHAR
);

3. I imported the following lines into the "UserAgent" table:

Code: Select all

^Blackberry([^ ]*).*$||||Blackberry \\1
^iPhone.*$|t|||Apple iPhone
^LGE?-([^ ]*).*$||||LG Electronics \\1
^MOT-([^ ]*).*$||||Motorola \\1
^Nokia([^ ]*).*$||||Nokia \\1
^SonyEricsson([^ ]*).*$||||Sony Ericsson \\1
^UPG1 UP/4.0 .* Blazer 1.0.*$|t|162|176|Palm/Samsung I500
^.*PalmSource/[^-]*-([^;]*).*$||||Palm \\1
^.*PalmSource;.* (Tungsten)?.*$||||Palm \\1
^.*Windows CE;.* PPC.*$||||Pocket PC
^.*Windows CE;.* Smartphone.*$||||Smartphone
^.*Linux armv5.* Maemo browser .* N770/SU-18$|t|800|480|Nokia 770 Web Tablet

Whereever in the PHP code I need to determine whether the browser is on a handheld device, I call the GetDeviceInfo function.

I also have the following lines in my standard "Base.css" file:

Code: Select all

.non-handheld {
    display:    inline;
}
.handheld-only {
    display:    none;
}

Then, a separate "handheld.css" file:

Code: Select all

.non-handheld {
    display:    none;
}
.handheld-only {
    display:    inline;
}

Then, in my HTML <head> block:

Code: Select all

  <link rel='stylesheet'                      type='text/css'         href='/css/Base.css'             />
  <link rel='stylesheet'  media='handheld'    type='text/css'         href='/css/Handheld.css'         />

This allows me to qualify HTML elements with ".non-handheld" or ".handheld-only" tags as appropriate.

The advantage of the above techniques are that you don't have to keep changing the PHP code when a new device comes out. When a user of a new device complains (and provides the date/time of when he attempted to access the site), you just look in your apache web server logs for the "User Agent" value, and then add an entry to the "UserAgent" table above.

However, you do have to understand regular expressions in order to create entries in the "UserAgent" table data. Oh, and the price is free.

[Alighieri]

That's great! Well done.

[ToonArmy]

1. I added the following PHP function:

Code: Select all

function GetDeviceInfo(){
    global $dataBase, $deviceInfo;
    $agent = @$_SERVER[ 'HTTP_USER_AGENT' ];
    $query = pg_Query( $dataBase,
              "SELECT *  FROM \"UserAgent\"  WHERE '$agent' ~ pattern  LIMIT 1" );
    if ( pg_Num_Rows( $query ) > 0 ){
        $deviceInfo = pg_Fetch_Array( $query );
        $deviceInfo[ 'device_name' ] = ereg_replace( $deviceInfo[ 'pattern' ],
                                                     $deviceInfo[ 'device_text' ],
                                                     $agent );
    }
    if ( ereg( '[ ;]([0-9]{2,4})x([0-9]{2,4})([ ;x)]|$)', $agent, $resolutions ) > 0 ){
        $deviceInfo[ 'horz_resolution' ] = $resolutions[ 1 ];
        $deviceInfo[ 'vert_resolution' ] = $resolutions[ 2 ];
        return TRUE;
    }
    return FALSE;
}

I hope you realise that you are performing no input sanitising and have opened yourself to the possibility of SQL injection.

[dkgibson]

I hope you realise that you are performing no input sanitising and have opened yourself to the possibility of SQL injection.

No, I didn't, but I do now! Thank you very much; I had thought that $_SERVER variables were sanitized, but a web search shows that this is a common misconception/problem.

I've corrected by original code above, in case someone doesn't read down this far, but apparently any of the following will work:

Code: Select all

    $agent = htmlentities( @$_SERVER[ 'HTTP_USER_AGENT' ], ENT_QUOTES );
    $agent = addslashes( @$_SERVER[ 'HTTP_USER_AGENT' ] );
    $agent = pg_escape_string( @$_SERVER[ 'HTTP_USER_AGENT' ] );

If there are better ways, I'd appreciate comment.

[Alighieri]

Personally, I find that mysql_real_escape_string() works wonders, but is specific to mySQL.