WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Droplets & Snippets => Topic started by: Ruud on October 13, 2010, 02:37:23 PM

Title: New snippet: isMobile()
Post by: Ruud on October 13, 2010, 02:37:23 PM
A question at the Dutch forum about detecting mobile browsers inspired me to create this snippet.

After installing the snippet, you can use the function isMobile() in your template, and decide on the result what .css you want to include.
The snippet is a wrapper around the detection script that is made by: Anthony Hand
The latest code (included in the snippet) can be found here: http://code.google.com/p/mobileesp/

I have setup a small website so you can see the snippet in action.
 - http://m.ww3.nl
Don't forget to go to the site with your mobile browser too :-)
A download (version 0.1-experimental) is also available on the same website.

The snippet will not tell you things like screensizes or if javascript can/cannot be used.
Future versions might give a bit more info about the device used (like isIphone, isAndroid, isWindowsMobile) but that will be the max for this snippet.

Have fun with it..
Ruud
Title: Re: New snippet: isMobile()
Post by: kweitzel on October 13, 2010, 02:55:05 PM
That is quite some thing ... just checked it with my Blackberry ... cool also, that you made the difference between normal and mobile browser immediately recognisable ...

cheers

Klaus
Title: Re: New snippet: isMobile()
Post by: tiesy on October 13, 2010, 10:13:09 PM
tested with my hd2 and opera mobile. it works. Cool!
Title: Re: New snippet: isMobile()
Post by: snark on October 14, 2010, 06:34:11 AM
On an iPhone 4 it displays the green layout but with textlines evenly long as THE normal website, is that how it is meant ( I saw THE previewpic and it had à more compact text.

I presume that is something that needs to be done in the css, so that Will be okay,

Great snippet
Title: Re: New snippet: isMobile()
Post by: Ruud on October 14, 2010, 10:06:36 AM
The site is meant for proving the phones are detected.. Not for quality CSS on all mobile devices..

Nice to hear the phone is detected.
More "reports" are appreciated..
Title: Re: New snippet: isMobile()
Post by: Re-Mi on November 01, 2010, 09:53:11 PM
Ruud,

This is a nice add to WebsiteBaker.

can the snipet also redirect to an other url or page ?

something in the line of if it's a mobile browser then redirect to m.yoururl.com else load yoururl.com (and not just load an other css

I searched the web for some answers, but as i'm not a programmer and i tried some bu they didn't work i'm stuck now.

Kind regards,

Michel

[edit]

laat maar gevonden

if (isMobile()) {
header('Location: http://m.yoururl.com/');
}

[/edit]
Title: Re: New snippet: isMobile()
Post by: Olli on November 21, 2010, 01:18:11 AM
very nice idea! thumbs up :-)
Title: Re: New snippet: isMobile()
Post by: mjm4842 on November 21, 2010, 03:41:45 AM
Thanks Ruud for this very useful Snippet!

While redirecting to a mobile version of the site is a great idea, for small business owners this can mean having to now manage two websites instead of one.

The switching of the CSS can work very well however for more complex layouts, I have found it sometimes easier to switch templates completely.

You can accomplish this by putting the following code into index.php:'

if (isMobile()) {
  require(WB_PATH.'/templates/'.TEMPLATE.'/mobile.php');
} else {
  require(WB_PATH.'/templates/'.TEMPLATE.'/desktop.php');
}

The layout for the mobile version of my site is then created by mobile.php while the desktop version by desktop.php.

By the way, does anyone know where I can find a decent HTML or WebsiteBaker template that look good on mobile devices? Specifically what I am looking for is a layout that looks good on devices like both Blackberries and iPhones without the need to zoom in. Open Source or similar licensing is prefered.

With best regards,

Michael Milette
Title: Re: New snippet: isMobile()
Post by: Ruud on November 26, 2010, 02:24:31 PM
Smartphones typically can do anything a normal browser can do (except for Flash).
The trick is not to use a fixed width, and be careful with too many graphics (speed/bandwidth).

Maybe it is a nice idea to publish links here to mobile enhanced WB sites.
Reports about different mobile browsers could help us all in the future.
I will use my Android smartphone to test :-)
Title: Re: New snippet: isMobile()
Post by: Argos on December 06, 2010, 12:36:49 PM
By the way, does anyone know where I can find a decent HTML or WebsiteBaker template that look good on mobile devices? Specifically what I am looking for is a layout that looks good on devices like both Blackberries and iPhones without the need to zoom in. Open Source or similar licensing is prefered.

http://themeforest.net/searches?term=mobile&type=files has lots of them for a few bucks each.
Title: Re: New snippet: isMobile()
Post by: Argos on December 06, 2010, 12:39:00 PM
Ruud, works great on my Samsung Galaxy S (Android 2.1), thanks!
It would be nice however, to let visitors decide what version to use. So instead of automatically send them to the mobile version, present 2 options: regular site or mobile site. Is that possible to add?
Title: Re: New snippet: isMobile()
Post by: Ruud on December 06, 2010, 02:03:17 PM
That should be possible..

Something like: using a codepage to display the "question" if isMobile() is true. Redirect to a homepage if isMobile() is false.
In the template you can test for a GET parameter (index.php?showmobile=1) and set a $_SESSION for the future pages template to use.

Code: (untested) [Select]
<?php
if (isMobile()) {
echo &
#39;<a href="/pages/home.php?showmobile=1">Mobile site</a> | <a href="/pages/home.php">Normal site</a>&#39;;
} else {
echo &
#39;<a href="/pages/home.php">To the website</a>&#39;;
}
?>

in the template:

Code: (untested) [Select]
<?php 
if (isset($_GET[&#39;showmobile&#39;] && $_GET[&#39;showmobile&#39;] == 1) {
  
$_SESSION[&#39;css&#39;] = &#39;mobile.css&#39;;
} elseif (!isset($_SESSION[&#39;css&#39;])) {
  
$_SESSION[&#39;css&#39;] = &#39;normal.css&#39;;
}
?>

Link your stylesheet with <?php echo $_SESSION['css']; ?>
Title: Re: New snippet: isMobile()
Post by: fischstäbchenbrenner on February 27, 2011, 03:08:43 PM
Thanks for the snippet, seems to work very good.

http://www.ig-jazz.at

If you go to the frontpage, with a mobile you should be redirectd to /mobil/heute.html

How I made it:
The standard pages-directory is /live
I simply copied it as /mobil and ask for $_SERVER['REQUEST_URI'] - if it contains "/mobil/" the template switches.
Title: Re: New snippet: isMobile()
Post by: Ruud on February 27, 2011, 04:23:30 PM
Well it is working fine, but when I use my 10" Android tablet to look at the site it is all very minimal.
i.e. the arrows to go forward/backward are very small. I would use bigger images for them.
Title: Re: New snippet: isMobile()
Post by: Harry P. on February 28, 2011, 01:41:51 PM
Just checked with Windows PC/Firefox as well as Samsung Galaxy Tab - switching works fine!
Title: Re: New snippet: isMobile()
Post by: Ruud on March 15, 2011, 02:11:20 PM
Today the guys from MobileEsp released a new detection script with some improvements.

This is included (plus some extra functionality) in the snippet version 0.2.

Download here (http://m.ww3.nl/get_it)
Title: Re: New snippet: isMobile()
Post by: NorHei on March 16, 2011, 07:55:05 AM
Hmm ... as far as i remember there is already a mechanism to handle the mobile phone issue:

Code: [Select]
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="handheld.css" type="text/css" media="[b]handheld[/b]" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

But to be true i never tested how many mobile phoes support this feature.

It seems that the  Ipohne need some extra line for correct display of css:
Code: [Select]
<link rel="stylesheet" href="stylePhone2.css" type="text/css" media="only screen and (max-device-width: 480px)" />
http://www.mediaevent.de/css/media-type.html


Title: Re: New snippet: isMobile()
Post by: Ruud on March 16, 2011, 10:20:31 AM
The problem with the handheld stylesheets is that not all mobile browsers support them.
Some will only load the handheld, some (windows mobile browser) will also load parts of the screen CSS, some will completely ignore the handheld stylesheets.

To know what to do, you could use the snippet to find out more details about the browser :-)
Title: Re: New snippet: isMobile()
Post by: NorHei on March 16, 2011, 11:31:25 AM
In other words the basic mechanism isn't relieable at all.
Ok, thats good to know!
Thx a lot.
Title: Re: New snippet: isMobile()
Post by: jollylama on May 23, 2012, 02:25:04 AM
Hi,

This mobile version sounds awesome! - sorry for the newbie question.. and I know this is an older post..

but, is there a step-by-step procedure somewhere for me to follow?

I've tried adding the snippet in the header of my template but i can't get it to work. I'm sure i'm missing something.

Thanks!
Title: Re: New snippet: isMobile()
Post by: Ruud on May 23, 2012, 10:16:09 AM
http://m.ww3.nl/help

The slider does nothing else than detecting if the visitor is a mobile visitor.
Within the check you can decide to use a different stylesheet, or even load another php template.

Something like:
Code: [Select]
<?php
if (isMobile()) {
  include(
'mobile.php');
  return;
}
?>

(in the top of your template index.php) will load movile.php instead of the current index.php
Title: Re: New snippet: isMobile()
Post by: jollylama on May 24, 2012, 03:26:47 AM
Awesome. I think i got it! Thanks so much!
Title: Re: New snippet: isMobile()
Post by: svsanchez on May 26, 2012, 12:40:49 AM
Hello, thank you for this valuable information. I am trying to test it myself but am a newbie with WB and am getting the following error after including the provided code in the body of my template:

Fatal error: Call to undefined function isMobile() in /home/sanjose/public_html/cms/templates/round/index.php on line 60

I guess that this means that I have to somehow "define" the isMobile function in the head section of my template? How do I do this? Or do I have to install something else? I read on Ruud's opening post that some code was available at a google page, I went there but I got more than 1000 lines of code from a "mdetect.php" file which I don't know what to do with!

Unfortunatelly I don't speak German or Dutch and I couldn't find more information regarding this in the English forum, so help will be greatly appreciated!

Thank you!!!
Title: Re: New snippet: isMobile()
Post by: Ruud on May 26, 2012, 03:43:36 PM
First you need to install the addon you can download here (http://m.ww3.nl/get_it)
Install (http://www.websitebaker2.org/en/help/user-guide/first-steps/add-ons.php) it like any other WB module
From that moment on the isMobile() function will work.
Title: Re: New snippet: isMobile()
Post by: svsanchez on May 27, 2012, 07:26:45 AM
Ruud, thank you very much for the information, this works BEAUTIFUL!!! I just had some issues figuring out where exactly I had to place the code inside my template, it has to be in the HEAD section :)
Title: Re: New snippet: isMobile()
Post by: N1kko on July 25, 2012, 11:35:40 PM
Rudd I must say I have just tried this snippet and works a treat  :-D

If you want a mobile site this is a superb solution, and a quick and easy way is duplicate your index.php template and css name them mobile.php and mobile.css... away you go

use this in your main index.php template

Code: [Select]
<?php
if (isMobile()) {
  include(
'mobile.php');
  return;
}
?>

and call the stylesheets with this

Code: [Select]
<?php $template isMobile() ? '/mobile.css' '/maintemplate.css'?>
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR.$template?>" media="screen" />
Title: Re: New snippet: isMobile()
Post by: acdc1 on September 14, 2012, 04:16:09 PM
Hi everyone!

I'm trying to use ismobile snippet on my website and it's not work .
I've downloaded ismobile version 0.3 and install it thru backend as module.

My goal is to switch whole template to mobile version. I 'm trying to put this

Code: [Select]
<?php
if (isMobile()) {
  include(
'mobile.php');
  return;
}
?>

at the top of my index.php but it doesn't work on my Ipad. (

In my index.php i have:
Code: [Select]

-------------- I'm trying to put ismobile check here

<?php

/*


*/

if(!defined('WB_URL')) {
header('Location: ../index.php');
exit(0);
}



?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php page_title(); ?> <?php echo WEBSITE_TITLE?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />

I think that I'm putting the code in a wrong way.  

Or I must put it inside <body> tag ???

And what I must have in my "mobile.php" ? Just a usual template code like "index.php"?

p.s. sorry for my english

Thanx!

Please help!
Title: Re: New snippet: isMobile()
Post by: Ruud on September 14, 2012, 05:37:48 PM
This is a correct way.

Doing it this way, you must use your mobile.php exactly the same as your index.php.

A quick check to see if the snippet is functioning use something like
Code: [Select]
<?php
if (isMobile()) {
  die(
"Mobile detected");
}
?>

It should just display the text "Mobile detected" (when you use a mobile browser) and nothing else.
Title: Re: New snippet: isMobile()
Post by: acdc1 on September 14, 2012, 05:54:12 PM
It works on my old nokia thru opera mini browser. But it doesn't work on my Ipad 1 ;-(


This is a correct way.

Doing it this way, you must use your mobile.php exactly the same as your index.php.

A quick check to see if the snippet is functioning use something like
Code: [Select]
<?php
if (isMobile()) {
  die(
"Mobile detected");
}
?>

It should just display the text "Mobile detected" (when you use a mobile browser) and nothing else.
Title: Re: New snippet: isMobile()
Post by: acdc1 on September 14, 2012, 06:07:15 PM
Strange, but if i check for "isIpad()"  it works
Title: Re: New snippet: isMobile()
Post by: Ruud on September 14, 2012, 11:27:38 PM
It seems the author of the detection script does not see the iPad's as a mobile (small screen) device.
So, if you need to change on iPad too, you should use:

Code: [Select]
<?php
if (isMobile() || isIpad()) {
  include(
'mobile.php');
  return;
}
?>

Ps.
Upgrading the mdetect.php script is not a bad idea too. I see that the script has many more devices that should be detected.
The content can be found here: http://mobileesp.googlecode.com/svn/PHP/mdetect.php
Copy the content from your browser window and replace it with the current mdetect.php in the module directory.

It will not solve your iPad detection problem though, but it will detect newer mobile devices.
Title: Re: New snippet: isMobile()
Post by: Ruud on September 14, 2012, 11:34:54 PM
Updated the snippet to version 0.4 with the latest detection script.

http://m.ww3.nl/get_it

Upgrading older versions using the standard WB module install/upgrade method is possible without problems.
Title: Re: New snippet: isMobile()
Post by: acdc1 on September 17, 2012, 12:36:40 PM
Thanx!
Title: Re: New snippet: isMobile()
Post by: N1kko on September 21, 2012, 05:21:25 PM
To support all mobiles and tablets a responsive layout is the best solution, although is mobile works
Great for WB
Title: Re: New snippet: isMobile()
Post by: Ruud on September 21, 2012, 06:06:06 PM
To support all mobiles and tablets a responsive layout is the best solution

Responsive design is great for a lot of websites, but..

- Not all mobile visitors have smartphones. (yes, some parts of the world do not use iFones)
- Not all content is useable for smartphones. (mobile data costs of a 2mb image scaled to 100px)

So it depends a lot on your location/visitor-target/content if responsive design is better than witch to a mobile website.
Title: Re: New snippet: isMobile()
Post by: N1kko on September 21, 2012, 07:13:06 PM
I agree with you Rudd but more and more web design companies are now designing
responsive sites.

I really do think it is the way forward but that's my opinion

Posted from my iFone
Title: Re: New snippet: isMobile()
Post by: G4 on December 09, 2012, 09:13:20 PM
This script detects several different divices. How many different website sizes (stylesheets) do you need to make?
Title: Re: New snippet: isMobile()
Post by: MdemiC on February 22, 2013, 02:13:37 PM
I also whant to know what G4 ask!
Title: Re: New snippet: isMobile()
Post by: Ruud on February 22, 2013, 02:22:47 PM
This script detects several different divices. How many different website sizes (stylesheets) do you need to make?

Thats up to you. Targeting current smartphones and tablets a single responsive template might be the best option.
They do not need this snippet at all.

This snippet is just to help you find out what device is visiting the website. What you do with it is whatever you see fit.
Title: Re: New snippet: isMobile()
Post by: svsanchez on January 16, 2014, 07:19:21 AM
That should be possible..

Something like: using a codepage to display the "question" if isMobile() is true. Redirect to a homepage if isMobile() is false.
In the template you can test for a GET parameter (index.php?showmobile=1) and set a $_SESSION for the future pages template to use.

Code: (untested) [Select]
<?php
if (isMobile()) {
echo 
'<a href="/pages/home.php?showmobile=1">Mobile site</a> | <a href="/pages/home.php">Normal site</a>';
} else {
echo 
'<a href="/pages/home.php">To the website</a>';
}
?>

in the template:

Code: (untested) [Select]
<?php 
if (isset($_GET['showmobile'] && $_GET['showmobile'] == 1) {
  
$_SESSION['css'] = 'mobile.css';
} elseif (!isset(
$_SESSION['css'])) {
  
$_SESSION['css'] = 'normal.css';
}
?>

Link your stylesheet with <?php echo $_SESSION['css']; ?>

Hello Ruud! In this example you are sending the user to the homepage, but how do we send the user to the same page he was trying to access instead of home.php?
Title: Re: New snippet: isMobile()
Post by: Ruud on January 16, 2014, 10:08:06 AM
Just create the "mobile" link without a page. That would stay on the same page.
Code: [Select]
<a href="?showmobile=1">Mobile site</a>
Title: Re: New snippet: isMobile()
Post by: svsanchez on January 16, 2014, 04:34:50 PM
Hello Ruud, thank you for your reply. I still haven't been able to make it work correctly, I get the Mobile Site | Normal Site question above the normal site, and it won't switch templates. Since Google has started penalizing sites which don't render correctly in mobiles, I think it is best to use your first solution and send the user automatically to the Mobile template. But me and other people I know hate the mobile versions of sites and prefer using the normal site on our mobiles, so I would like to include a link at the bottom of my Mobile template to reload the page using the Normal template. Is there a way to do this?
Title: Re: New snippet: isMobile()
Post by: Ruud on January 16, 2014, 04:55:57 PM
You can do the same trick the other way around too:
Combined it would look something like this (a bit more simplyfied):

Code: [Select]
<?php 
// create links
echo '<a href="?mobile">Mobile site</a> | <a href="?web">Normal site</a>';
?>

Code: [Select]
<?php
// test what stylesheet should be used
if (isset($_GET['mobile']))  $_SESSION['css'] = 'mobile.css';
if (isset(
$_GET['web']))  $_SESSION['css'] = 'normal.css';

// if a stylesheet was not set yet
if (!isset($_SESSION['css']))  $_SESSION['css'] = 'normal.css';
?>


Link the stylesheet like this:
Code: [Select]
<link href="<?php echo TEMPLATE_DIR?>/<?php echo $_SESSION['css']; ?>" rel="stylesheet" type="text/css" />
Title: Re: New snippet: isMobile()
Post by: svsanchez on January 16, 2014, 07:29:06 PM
Thank you Ruud, maybe I am not expressing myself correctly, and since I get an error when I try your code I'll tell you how I have my test setup:

I have 2 different templates, each with their own css:

- index.php which uses template.css, and
- mobile.php which uses mobile.css

When I tried this code you sent previously the site rendered correctly with index.php and template.css when I visited it on my PC, and also correctly when I visited it with my Android phone and tablet, whith mobile.php and mobile.css:

<?php
if (isMobile()) {
  include('mobile.php');
  return;
}
?>

However when I use the codes you shared later (your latest code and the previous one) I get the following error:

Parse error: syntax error, unexpected T_VARIABLE in /home/deguatec/public_html/templates/round2/index.php on line 159

Since I haven't been able to make it work, I tried to understand what the set of code does and I think that it should tell WB to use either normal.css or mobile.css depending on which link I chose right? But how will WB know which TEMPLATE it has to use (mobile.php or index.php)?
Title: Re: New snippet: isMobile()
Post by: Ruud on January 16, 2014, 11:06:28 PM
I first fixed (hopefully) the error in my previous post, eventhough it is not what you need :)
(forget about that one)

You are looking for something like this:

Code: [Select]
<?php
$mobile 
isMobile(); // check if the visitor uses mobile device (for first visit)
if (isset($_SESSION['mobile'])) $mobile $_SESSION['mobile']; // check if previous mobile was used
if (isset($_GET['mobile'])) $mobile true // check if user wants mobile view
if (isset($_GET['web'])) $mobile false;   // check if user wants normal view
$_SESSION['mobile'] = $mobile;    // store view setting for next page loading
if ($mobile) {  // if mobile is wanted/needed use other php template
include ('mobile.php');
return;
}
?>

   
What this does:

1. It will detect the mobile device first.
2. Next it will check if the preference was changes on the last page request
3. Next it will check if the current request wants the mobile view
4. Next it will check if the current request wants the normal view
5. The results of all above checks are stored for the next page request
6. If the result is "mobile", load the mobile template
Title: Re: New snippet: isMobile()
Post by: svsanchez on January 17, 2014, 08:00:59 AM
Hello Ruud, you did fix it and this works nice! But I think there's one final adjustment your code needs to be perfect:

If I include this code on the index.php template (normal site) it will ask the question about which version you want to see even if you visit from a desktop PC which obviously shouldn't happen.

So I think there should be condition first to show the question ONLY if you are visiting from a mobile, after a lot of trial and error I think I was able to do it :) but I am not a programmer so if there's any potential risk of using this code please tell us!

Here's the code I use on my index.php file which I tested on my PC, android phone and android tablet and seems to work ok in case someone wants to use it and make it better:

<?php

if ($mobile = isMobile()) {
// create links
echo '<a href="?mobile">Mobile site</a> | <a href="?web">Normal site</a>';
}

$mobile = isMobile();            // check if the visitor uses mobile device (for first visit)
if (isset($_SESSION['mobile'])) $mobile = $_SESSION['mobile'];      // check if previous mobile was used
if (isset($_GET['mobile'])) $mobile = true;    // check if user wants mobile view
if (isset($_GET['web'])) $mobile = false;     // check if user wants normal view
$_SESSION['mobile'] = $mobile;         // store view setting for next page loading
if ($mobile) {                // if mobile is wanted/needed use other php template
   include ('mobile.php');
   return;
}
?>

Hoping this is for use for the community...
Title: Re: New snippet: isMobile()
Post by: Ruud on January 17, 2014, 10:30:58 AM
If I include this code on the index.php template (normal site) it will ask the question about which version you want to see even if you visit from a desktop PC which obviously shouldn't happen.
It is possible that a (future) mobile device is not detected correctly. I think those visitors would like to be able to manually change to the mobile version.
Title: Re: New snippet: isMobile()
Post by: svsanchez on January 17, 2014, 11:02:31 PM
Maybe I didn't express myself correctly, what I meant is that with your code, when I visited my site from my desktop computer, it asked me if I wanted to see the mobile or normal version. But since I was on my desktop, that question was out of question! So with the extra condition I was able to add, now I can go to my site using my desktop computer and the question doesn't appear anymore  :-)

The question now only appears if I visit from my mobile or tablet, both in the mobile and normal versions  :-D
Title: Re: New snippet: isMobile()
Post by: dbs on January 17, 2015, 08:44:59 PM
Hi, thx for this nice module.

I want to know first whether the visitor has a touch screen.
Is this right to catch all touchers?
Code: [Select]
<?php //colored
$touch = (isSmartPhone() || isTablet());
if(!
$touch){
  do 
this ...
} else {
  do 
that ...
?>
Title: Re: New snippet: isMobile()
Post by: Ruud on January 17, 2015, 10:25:11 PM
You will miss the laptops with touch enabled screens (maybe even more like gamestations and smartwatches)
The only way to really detect touch capibilities is by using javascript.