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!
Suggested Hosts
SixReasons
Registered User
Posts: 80
Joined: Sat Jul 19, 2008 3:09 pm

Re: Making phpBB3 Mobile Compatible

Post by SixReasons »

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


how do you do that? is that something your browser does or a style you can create to make the screen resize?
Alighieri
Registered User
Posts: 135
Joined: Sun Mar 13, 2005 5:24 pm

Re: Making phpBB3 Mobile Compatible

Post by Alighieri »

His screenshots are completely dependent upon his device. If a user uses Opera or any modern mobile browser, they should be able to access the regular version just fine - just like his screenshots show.

The changes in question would be for devices that do not support standard CSS or page-level zoom.
User avatar
zenrei
Registered User
Posts: 172
Joined: Fri Oct 06, 2006 1:34 pm

Re: Making phpBB3 Mobile Compatible

Post by zenrei »

Alighieri wrote: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!
Just to understand what you're saying above, I just have to add that script to the beginning of style.php?
ptex
Registered User
Posts: 21
Joined: Wed Feb 06, 2008 3:55 pm

Re: Making phpBB3 Mobile Compatible

Post by ptex »

Hi Zenrei,

Here's the step by step you need for making this work in your site:
First make a backup of the style.php file in case you need to restore it:

Open "style.php" in the root of your board, then
Find:

Code: Select all

define('IN_PHPBB', true);
Add Before (in a new line):

Code: Select all

if( !detect_mobile_device() ){
Find:

Code: Select all

exit;

?>
Add Before (in a new line):

Code: Select all

}
Find:

Code: Select all

?>
Add Before (in a new line):

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;
      }
    }
Save and upload the file. Also, remember to clear the board cache in the ACP.

This is how it worked for me ;)

Great mod Alighieri!!! It works perfectly!!! 8-)
Last edited by ptex on Sat Nov 22, 2008 7:50 pm, edited 2 times in total.
ptex
Registered User
Posts: 21
Joined: Wed Feb 06, 2008 3:55 pm

Avoiding phpBB portals to show in Mobile devices

Post by ptex »

For all those who installed a portal in your forum (eg. Board3 Portal, phpBB Portal or something similar) you may want to skip mobile devices from showing the portal since it usually has several columns and relies on phpBB style sheets.

The way to do this is to edit the .htaccess (remember to back it up first) and include the following lines - it basically redirects, for all mobiles devices found, the file portal.php to index.php :

Code: Select all

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} "text/vnd.wap.wml|application/vnd.wap.xhtml+xml" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteRule portal.php index.php [L]
The code above was adapted from the example given in: http://snipplr.com/view/5192/redirect-m ... -htaccess/
User avatar
zenrei
Registered User
Posts: 172
Joined: Fri Oct 06, 2006 1:34 pm

Re: Making phpBB3 Mobile Compatible

Post by zenrei »

it worked, but when i connected via my computer, it didn't seem to realize i'm not on my phone anymore.

i'm going to make a mobile theme instead.

is there a code that we can use to make it switch to the mobile theme instead of wiping out the formatting?
ptex
Registered User
Posts: 21
Joined: Wed Feb 06, 2008 3:55 pm

Re: Making phpBB3 Mobile Compatible

Post by ptex »

It should work if it was installed according to the instructions. This should be fairly simple, but please make notice that some lines are to be inserted after and some others before the text to find.

I tried in my test forum and it works perfectly both in the case of cellular and web accesses. Moreover I tried it with the .htaccess modification and it worked flawlessly too.

Regarding the code the apply to automatically switch styles, sorry can't help here for the moment. I'm not well versed in the phpBB architecture yet but I anticipate it shouldn't be too complicated. It's a matter of finding the right spot to insert the code.
rippededge
Registered User
Posts: 209
Joined: Tue Dec 04, 2007 1:55 am

Re: Making phpBB3 Mobile Compatible

Post by rippededge »

Ok, I have done this, but is there a way with this method to force my mobile theme?

I have made theme that is mobile compatible and I want it to auto load when a mobile device hits it. This works to take away all theme material, now I want it to auto go to mobile.
ptex
Registered User
Posts: 21
Joined: Wed Feb 06, 2008 3:55 pm

Re: Making phpBB3 Mobile Compatible

Post by ptex »

Yes there is :)

Instead of

Code: Select all

if( !detect_mobile_device() ){
in one of the lines above,

write this

Code: Select all

if( detect_mobile_device() ){
But now your normal browsers will see the mobile version and the mobiles will see the normal version ;) Make sure you reinstate the original condition (all I did was to remove the negative conditional statement (eg: !).
rippededge
Registered User
Posts: 209
Joined: Tue Dec 04, 2007 1:55 am

Re: Making phpBB3 Mobile Compatible

Post by rippededge »

I have figured out how to do this... and now I have it working on my forum... thanks for the help though.
User avatar
newsbee
Registered User
Posts: 279
Joined: Sat Mar 29, 2003 1:07 pm
Location: Moscow
Contact:

Re: Making phpBB3 Mobile Compatible

Post by newsbee »

PTEX, there are several exits in style.php, which one do you mean in that code change?
ptex
Registered User
Posts: 21
Joined: Wed Feb 06, 2008 3:55 pm

Re: Making phpBB3 Mobile Compatible

Post by ptex »

Code: Select all

exit;

?>
Apologies for such a vague instruction :oops:

I've updated the code in my post above to better illustrate the changes. Please refer there in case you have any doubts
User avatar
newsbee
Registered User
Posts: 279
Joined: Sat Mar 29, 2003 1:07 pm
Location: Moscow
Contact:

Re: Making phpBB3 Mobile Compatible

Post by newsbee »

Thanks, ptex!

Now comes the real problem: the mode doesn't work on my Nokia N95. I changed the style.php file and cleared all cache - but it just shows the board as a normal browser would. No mobile look...
ptex
Registered User
Posts: 21
Joined: Wed Feb 06, 2008 3:55 pm

Re: Making phpBB3 Mobile Compatible

Post by ptex »

I see 2 possible causes:
  • either the id string of your nokia browser isn't being detected or
  • you may need to refresh the template and theme (go to acp; Styles;Templates; Refresh in your default template (probably prosilver) and acp; Styles; Themes and select Refresh your default theme).
Beyond this, try my suggestion above to see if it's working.
User avatar
newsbee
Registered User
Posts: 279
Joined: Sat Mar 29, 2003 1:07 pm
Location: Moscow
Contact:

Re: Making phpBB3 Mobile Compatible

Post by newsbee »

ptex wrote:I see 2 possible causes:
  • either the id string of your nokia browser isn't being detected or
  • you may need to refresh the template and theme (go to acp; Styles;Templates; Refresh in your default template (probably prosilver) and acp; Styles; Themes and select Refresh your default theme).
Beyond this, try my suggestion above to see if it's working.
I'm collecting data from my users who are testing their mobiles: no luck so far.

I've changed the style.php (removed !) and the styles did change. Waiting for further test results...
Post Reply

Return to “phpBB Discussion”