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
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
tested with my hd2 and opera mobile. it works. Cool!
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
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..
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]
very nice idea! thumbs up :-)
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
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 :-)
Quote from: mjm4842 on November 21, 2010, 03:41:45 AM
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.
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?
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.
<?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:
<?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']; ?>
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.
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.
Just checked with Windows PC/Firefox as well as Samsung Galaxy Tab - switching works fine!
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)
Hmm ... as far as i remember there is already a mechanism to handle the mobile phone issue:
<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:
<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
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 :-)
In other words the basic mechanism isn't relieable at all.
Ok, thats good to know!
Thx a lot.
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!
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:
<?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
Awesome. I think i got it! Thanks so much!
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!!!
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.
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 :)
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
<?php
if (isMobile()) {
include('mobile.php');
return;
}
?>
and call the stylesheets with this
<?php $template = isMobile() ? '/mobile.css' : '/maintemplate.css'; ?>
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR.$template; ?>" media="screen" />
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
<?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:
-------------- 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!
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
<?php
if (isMobile()) {
die("Mobile detected");
}
?>
It should just display the text "Mobile detected" (when you use a mobile browser) and nothing else.
It works on my old nokia thru opera mini browser. But it doesn't work on my Ipad 1 ;-(
Quote from: 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
<?php
if (isMobile()) {
die("Mobile detected");
}
?>
It should just display the text "Mobile detected" (when you use a mobile browser) and nothing else.
Strange, but if i check for "isIpad()" it works
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:
<?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.
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.
Thanx!
To support all mobiles and tablets a responsive layout is the best solution, although is mobile works
Great for WB
Quote from: n1kko on September 21, 2012, 05:21:25 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.
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
This script detects several different divices. How many different website sizes (stylesheets) do you need to make?
I also whant to know what G4 ask!
Quote from: 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?
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.
Quote from: 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.
<?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:
<?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?
Just create the "mobile" link without a page. That would stay on the same page.
<a href="?showmobile=1">Mobile site</a>
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?
You can do the same trick the other way around too:
Combined it would look something like this (a bit more simplyfied):
<?php
// create links
echo '<a href="?mobile">Mobile site</a> | <a href="?web">Normal site</a>';
?>
<?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:
<link href="<?php echo TEMPLATE_DIR; ?>/<?php echo $_SESSION['css']; ?>" rel="stylesheet" type="text/css" />
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)?
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:
<?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
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...
Quote from: svsanchez on January 17, 2014, 08:00:59 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.
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
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?
<?php //colored
$touch = (isSmartPhone() || isTablet());
if(!$touch){
do this ...
} else {
do that ...
} ?>
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.