FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Offering the full site to mobile users





welshsteve
Hi everyone. Not sure if this is in the correct sub forum.

I'm VERY new to mobile website development. Basically, here is my scenario.

I have built a very basic mobile version of a website I run.

I have browser detection on so it re-directs mobile users to this mobile version automatically.

What I want to know is how do I offer the full site back to mobile users? I have seen this on a number of sites. I plan on having the device detection on all pages of the main site, so if I simply provide a link back, they'll just get stuck in a loop.

The full site works fine on mobile devices until it comes to the use of overflow:auto on the main content div. That's when touch screen users lose the content as they are unable to see all the content.

So I don't really want them using the main site on a mobile device. But I thought it would be nice if I at least give them the option if they wish.

My mobile version isn't great, but all the content is easily read, so should be sufficient for people on the go.

Many thanks in advance.
sonam
Maybe the simplest way is sessions. Define one session (for example: $_SESSION['mobile']=0; on main page. If someone click link <a href=page2.php?mobile=1>Page 2 full preview</a> just use $_GET for rebuild $_SESSION['mobile'] and redirect on normal view. As long $_SESSION['mobile'] is 1 show normal view. If in some case someone use <a href=page3.php?mobile=0>Page 3 mobile preview</a> then again rebuild $_SESSION['mobile'] and show mobile version of page. Of course, by click on home page $_SESSION['mobile']=0; will always rebuild session on zero because you don't want to show full home page on mobile devices.

Sonam

P.S.
Sorry if this explanation is too confused. Confused

P.S. 2
Did you read posts about Responsive design? What do you mean is this better solution then redirect?
welshsteve
Hi, thanks for this.

I'd hardly call myself anything other than a beginner on php. I have generally obtained scripts either through here, or via google searches and adapted as I've needed.

Do you have a simple working example I can use and learn from?
sonam
I am little bit thinking but I need your redirect script (are you use this one what I suggest in HTML forum). Then I can see what I can do for full sizes of other pages.

Sonam
welshsteve
This is the re-direct script. But all the browsers on my machine have stopped this working, saying there are too many redirects. So I can't use this Sad

Code:


<?php
 
$mobile_browser = '0';
 
if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
}
 
if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
}   
 
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','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','oper','palm','pana','pant','phil','play','port','prox',
    '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','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda ','xda-');
 
if (in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
}
 
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
    $mobile_browser++;
}
 
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {
    $mobile_browser = 0;
}
 
if ($mobile_browser > 0) {
   header( 'Location: http://mobile.ldbsa.co.uk' ) ;
}
else {
   header( 'Location: http://www.ldbsa.co.uk' ) ;
}   
 
?>

sonam
Too much redirection? There is only one redirection. I will check this but I am too busy today and tomorrow. If someone find where is problem before me maybe you will get it before Monday.

Sonam
Fire Boar
The problem is the call to header() in the else block. If this code is called on your front page, it will redirect to itself, which will recursively redirect to itself in an infinite loop, hence too much redirection. Just remove that bit and it will be fine.
Aredon
Hmm I recently installed mobile device detection on my website. I'll have to dig around and find the module for it. I think it would simplify things for you.

I recently went through a massive hard drive failure though, so it may take me a little while to get it all packed up from my web server. I'll try to post that here tomorrow. Smile
welshsteve
Fire Boar wrote:
The problem is the call to header() in the else block. If this code is called on your front page, it will redirect to itself, which will recursively redirect to itself in an infinite loop, hence too much redirection. Just remove that bit and it will be fine.


Thanks, I have commented out the else block now. Hopefully that will sort it.
Aredon
http://blog.mobileesp.com/ This is the primary source. I edited mine a little. Specifically the detectmobilequick() function, for some reason it was excluding tablets from the detection. So I changed a false to true somewhere (couldn't tell you were offhand without looking more in depth. (granted my version may be a bit old so maybe this is fixed, but i doubt it.)

Then I attached it to my pages via a global include / global variable like so:
(note: I changed my file name because I merged the mobileesp source with some of my own browser functions.)
Code:

include '../modules/browser.php';
$mobile_check = new uagent_info();
global $mobile;
$mobile = $mobile_check->DetectMobileQuick();


Then you can do simple if statements to check for mobile devises and change certain things in the HTML or CSS.

For instance I used it to hide a floating background image that was causing page width issues on mobile devices:
Code:

<div id="header_wrapper">
  <div id="logo"></div>
  <? if($mobile == false){ ?><div id="worgen"></div><? } ?>
</div>

Hope this helps, or at the very least simplifies what you're trying to do. Cool
welshsteve
Thanks, I will take a look at this.
jmraker
This is the code I use to detect mobile browsers, where almost every page redirects to the mobile site except when cookie named 'fullsite' prevents the mobile site from, plus it can redirect to the next version of the mobile site ( /mobile2/ ) if the 'mobileDev' cookie is set.

I got the list of agent names from logging the user agents. A surprising number of mobile devices have the word "Mobile" in their user agent.

Code:
if(!isset($GLOBALS['inMobileSite'])){
   if (
      stristr($_SERVER['HTTP_USER_AGENT'], 'Mobile') ||
      stristr($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') ||
      stristr($_SERVER['HTTP_USER_AGENT'], 'UP.Browser') ||
      stristr($_SERVER['HTTP_USER_AGENT'], 'NetFront') ||
      stristr($_SERVER['HTTP_USER_AGENT'], 'Nokia') ||
      stristr($_SERVER['HTTP_USER_AGENT'], 'Jasmine') ||
      stristr($_SERVER['HTTP_USER_AGENT'], 'SymbianOS') ||
      stristr($_SERVER['HTTP_USER_AGENT'], 'BlackBerry')
   ){
      if(strstr($_SERVER['SCRIPT_NAME'], '/backend/') != false);
      elseif(strstr($_SERVER['SCRIPT_NAME'], '/mobile/') != false);
      elseif(strstr($_SERVER['SCRIPT_NAME'], '/img.php') != false);
      elseif(strstr($_SERVER['SCRIPT_NAME'], '/login.php') != false);
      elseif(!isset($_COOKIE['fullsite'])){
         if(isset($_COOKIE['mobileDev']))
            header('Location: /mobile2/');
         else
            header('Location: /mobile/');
         exit();
      }
   }
}
Aredon
welshsteve wrote:
Thanks, I will take a look at this.


If you decide to use mobile esp. Perhaps rather than a redirect you could do a separate include for the index? It would save the user some browse time, and you wouldn't be forcing a redirect on anyone. (Which on a mobile device can be somewhat annoying)

Code:

if($mobile==true){
include 'mobile_content.php';
exit;
}

<-- ORIGINAL INDEX HTML -->


Otherwise it may be simpler to remove the problematic code with if $mobile statements, as I mentioned earlier. Your css file will have to become .php though if you want to make statements there. You could also store this information in a session variable (as previously mentioned) and not have to run mobileesp every time.
jmlworld
Why not ignore all these browser detection methods and use responsive design? It will not need any server side detection scripts, its browser based and you don't need to create an entire site from ground zero for mobile users.

The only cons in responsive design is that mobiles users cannot switch to see the design for larger screens, but this can be solved by adding a query string like /?view=fullsite in the URL which in return serves a separate stylesheet for large screens.
Aredon
jmlworld wrote:
Why not ignore all these browser detection methods and use responsive design? It will not need any server side detection scripts, its browser based and you don't need to create an entire site from ground zero for mobile users.

The only cons in responsive design is that mobiles users cannot switch to see the design for larger screens, but this can be solved by adding a query string like /?view=fullsite in the URL which in return serves a separate stylesheet for large screens.

Because that requires somewhat extensive recodes of your original design. Whereas if you already have a design that works minus a few caveats you can simply exclude those parts with detection. Responsive design is great if you're making a new site from scratch or would like to entirely recode your CSS, but I would not recommend the undertaking in this instance. Especially if you haven't done it before. It does take a fair amount of learning.

For instance my site: http://amicitia.frih.net/index.php
The layout already worked quite well on mobile devices, but the decorative images on the right caused some page stretching on them. There was also a box or two that didn't function quite the way I wanted it to, and rather than recode my entire design to be responsive, I excluded those problematic parts of the design via detection.
Related topics
Windows Vista Official Thread
New Years Predictions for 2006
Free site submissions
India adds record 3.2 million GSM mobile users in December
Help needed for mobile site
New design required for my site *Urgent !!!/ Not Solved Yet*
Beware Mobile users.
Just to be clear... ...sorry to ask but...
WAP site creation and legality of files.
Two questions.
Search Engine Listings
Make a Web Page for a Cell phone
Full Site Installation
A mobile version of the site
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.