Author Topic: New snippet: isMobile()  (Read 33905 times)

Offline Ruud

  • Posts: 3647
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
New snippet: isMobile()
« 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

Offline kweitzel

  • WebsiteBaker Org e.V.
  • **
  • Posts: 6983
  • Gender: Male
Re: New snippet: isMobile()
« Reply #1 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

Offline tiesy

  • Posts: 125
    • Wir in Wallenhorst
Re: New snippet: isMobile()
« Reply #2 on: October 13, 2010, 10:13:09 PM »
tested with my hd2 and opera mobile. it works. Cool!

snark

  • Guest
Re: New snippet: isMobile()
« Reply #3 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
« Last Edit: October 14, 2010, 06:38:17 AM by snoork »

Offline Ruud

  • Posts: 3647
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: New snippet: isMobile()
« Reply #4 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..

Offline Re-Mi

  • Posts: 97
Re: New snippet: isMobile()
« Reply #5 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]
« Last Edit: November 01, 2010, 10:08:22 PM by Re-Mi »

Offline Olli

  • Posts: 291
Re: New snippet: isMobile()
« Reply #6 on: November 21, 2010, 01:18:11 AM »
very nice idea! thumbs up :-)

Offline mjm4842

  • Posts: 198
Re: New snippet: isMobile()
« Reply #7 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
« Last Edit: November 21, 2010, 03:43:39 AM by mjm4842 »
Frustrated? Spending too much time developing when all you really want is a working website? Contact me directly if I can be of services to you.
___________________ ________


www.tngconsulting.c a

Offline Ruud

  • Posts: 3647
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: New snippet: isMobile()
« Reply #8 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 :-)

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: New snippet: isMobile()
« Reply #9 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.
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: New snippet: isMobile()
« Reply #10 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?
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline Ruud

  • Posts: 3647
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: New snippet: isMobile()
« Reply #11 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']; ?>

fischstäbchenbrenner

  • Guest
Re: New snippet: isMobile()
« Reply #12 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.

Offline Ruud

  • Posts: 3647
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: New snippet: isMobile()
« Reply #13 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.

Harry P.

  • Guest
Re: New snippet: isMobile()
« Reply #14 on: February 28, 2011, 01:41:51 PM »
Just checked with Windows PC/Firefox as well as Samsung Galaxy Tab - switching works fine!
« Last Edit: February 28, 2011, 01:46:24 PM by Harry P. »

Offline Ruud

  • Posts: 3647
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: New snippet: isMobile()
« Reply #15 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

NorHei

  • Guest
Re: New snippet: isMobile()
« Reply #16 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


« Last Edit: March 16, 2011, 08:01:50 AM by NorHei »

Offline Ruud

  • Posts: 3647
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: New snippet: isMobile()
« Reply #17 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 :-)

NorHei

  • Guest
Re: New snippet: isMobile()
« Reply #18 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.

Offline jollylama

  • Posts: 30
  • Gender: Male
  • that's gonna leave a mark
    • some of my work
Re: New snippet: isMobile()
« Reply #19 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!
« Last Edit: May 23, 2012, 04:43:58 AM by jollylama »

Offline Ruud

  • Posts: 3647
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: New snippet: isMobile()
« Reply #20 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

Offline jollylama

  • Posts: 30
  • Gender: Male
  • that's gonna leave a mark
    • some of my work
Re: New snippet: isMobile()
« Reply #21 on: May 24, 2012, 03:26:47 AM »
Awesome. I think i got it! Thanks so much!

Offline svsanchez

  • Posts: 466
Re: New snippet: isMobile()
« Reply #22 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!!!

Offline Ruud

  • Posts: 3647
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: New snippet: isMobile()
« Reply #23 on: May 26, 2012, 03:43:36 PM »
First you need to install the addon you can download here
Install it like any other WB module
From that moment on the isMobile() function will work.

Offline svsanchez

  • Posts: 466
Re: New snippet: isMobile()
« Reply #24 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 :)

 

postern-length