Making phpBB3 Mobile Compatible

Do not post support requests, bug reports or feature requests. Discuss phpBB here. Non-phpBB related discussion goes in General Discussion!
Get Involved

Making phpBB3 Mobile Compatible

Postby Alighieri » Mon Oct 01, 2007 6:16 pm

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!
User avatar
Alighieri
Registered User
 
Posts: 135
Joined: Sun Mar 13, 2005 5:24 pm

Re: Making phpBB3 Mobile Compatible

Postby andymoo » Thu Oct 04, 2007 7:40 am

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.
andymoo
Registered User
 
Posts: 1
Joined: Thu Oct 04, 2007 7:30 am

Re: Making phpBB3 Mobile Compatible

Postby Alighieri » Sat Oct 06, 2007 10:20 pm

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?
User avatar
Alighieri
Registered User
 
Posts: 135
Joined: Sun Mar 13, 2005 5:24 pm

Re: Making phpBB3 Mobile Compatible

Postby statm » Tue Oct 09, 2007 10:26 am

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.
statm
Registered User
 
Posts: 445
Joined: Thu Jul 21, 2005 11:03 am
Location: NC, USA
Name: Matt

phpBB3 Problems on Windows Mobile

Postby Pony99CA » Wed Dec 19, 2007 9:13 pm

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
Silicon Valley Pocket PC (http://www.svpocketpc.com)
Creator of manage_bots and spoof_user (ask me)
Need hosting for a small forum with full cPanel & MySQL access? Contact me or PM me.
User avatar
Pony99CA
Registered User
 
Posts: 4535
Joined: Thu Sep 30, 2004 3:13 pm
Location: Hollister, CA
Name: Steve

Re: Making phpBB3 Mobile Compatible

Postby Pony99CA » Wed Dec 19, 2007 9:23 pm

Alighieri wrote: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
Silicon Valley Pocket PC (http://www.svpocketpc.com)
Creator of manage_bots and spoof_user (ask me)
Need hosting for a small forum with full cPanel & MySQL access? Contact me or PM me.
User avatar
Pony99CA
Registered User
 
Posts: 4535
Joined: Thu Sep 30, 2004 3:13 pm
Location: Hollister, CA
Name: Steve

Re: Making phpBB3 Mobile Compatible

Postby careersng » Sat Dec 22, 2007 2:16 am

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

REgards
Careersng
Career Development for Nigerians ...A free knowledge Portal!
http://www.careersng.com/forum
careersng
Registered User
 
Posts: 10
Joined: Sun Dec 09, 2007 1:48 am
Location: Nigeria

Re: Making phpBB3 Mobile Compatible

Postby Phil » Sat Dec 22, 2007 6:30 am

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.
Moving on, with the wind. | My Corner of the Web
User avatar
Phil
Former Team Member
 
Posts: 10402
Joined: Sat Nov 25, 2006 4:11 am
Name: Phil Crumm

Re: Making phpBB3 Mobile Compatible

Postby ElbertF » Sat Dec 22, 2007 8:10 am

Pony99CA wrote: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:

Image Image Image
ElbertF
QA Team
 
Posts: 527
Joined: Thu Mar 11, 2004 9:41 pm
Location: Australia

Re: Making phpBB3 Mobile Compatible

Postby rickyg » Mon Jan 14, 2008 2:16 am

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
rickyg
Registered User
 
Posts: 26
Joined: Mon Mar 08, 2004 2:26 pm
Location: Boston, Ma USA

Re: Making phpBB3 Mobile Compatible

Postby dkgibson » Mon Jan 14, 2008 3:07 am

Alighieri wrote: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.
Last edited by dkgibson on Wed Jan 23, 2008 7:35 pm, edited 4 times in total.
I don't answer private messages on topics of public interest, because it defeats the whole purpose of a message board.
User avatar
dkgibson
Registered User
 
Posts: 24
Joined: Sat Oct 23, 2004 11:27 pm
Location: Seattle area, WA, USA

Re: Making phpBB3 Mobile Compatible

Postby Alighieri » Wed Jan 23, 2008 4:26 pm

That's great! Well done. 8-)
User avatar
Alighieri
Registered User
 
Posts: 135
Joined: Sun Mar 13, 2005 5:24 pm

Re: Making phpBB3 Mobile Compatible

Postby ToonArmy » Wed Jan 23, 2008 6:00 pm

dkgibson wrote: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.
Chris SmithBlogGitHub
Image
In a foreign field he lay. Lonely soldier unknown grave. On his dying words he prays. Tell the world of Paschendale.
User avatar
ToonArmy
Former Team Member
 
Posts: 4607
Joined: Sat Mar 06, 2004 5:29 pm
Location: Worcestershire, UK
Name: Chris Smith

Re: Making phpBB3 Mobile Compatible

Postby dkgibson » Wed Jan 23, 2008 7:21 pm

ToonArmy wrote: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.
I don't answer private messages on topics of public interest, because it defeats the whole purpose of a message board.
User avatar
dkgibson
Registered User
 
Posts: 24
Joined: Sat Oct 23, 2004 11:27 pm
Location: Seattle area, WA, USA

Re: Making phpBB3 Mobile Compatible

Postby Alighieri » Thu Jan 24, 2008 4:59 pm

Personally, I find that mysql_real_escape_string() works wonders, but is specific to mySQL.
User avatar
Alighieri
Registered User
 
Posts: 135
Joined: Sun Mar 13, 2005 5:24 pm

Next

Return to phpBB Discussion

Who is online

Users browsing this forum: No registered users and 14 guests