New snippet: isMobile()

[Ruud]

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.

[dbs]

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 Expand

<?php //colored
$touch = (isSmartPhone() || isTablet());
if(!$touch){
  do this ...
} else {
  do that ...
} ?>

[svsanchez]

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 

[Ruud]

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.

[svsanchez]

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...

[Ruud]

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 Expand

<?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

[svsanchez]

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)?

[Ruud]

You can do the same trick the other way around too:
Combined it would look something like this (a bit more simplyfied):

Code Select Expand

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


Code Select Expand


<?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 Expand

<link href="<?php echo TEMPLATE_DIR; ?>/<?php echo $_SESSION['css']; ?>" rel="stylesheet" type="text/css" />

[svsanchez]

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?

[Ruud]

Just create the "mobile" link without a page. That would stay on the same page.

Code Select Expand

<a href="?showmobile=1">Mobile site</a>

[svsanchez]

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 Expand

<?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 Expand

<?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?

[Ruud]

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.

[MdemiC]

I also whant to know what G4 ask!

[G4]

This script detects several different divices. How many different website sizes (stylesheets) do you need to make?

[N1kko]

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

[Ruud]

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.

[N1kko]

To support all mobiles and tablets a responsive layout is the best solution, although is mobile works
Great for WB

[acdc1]

Thanx!

[Ruud]

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.

[Ruud]

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 Expand

<?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.

[acdc1]

Strange, but if i check for "isIpad()"  it works

[acdc1]

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 Expand


<?php
if (isMobile()) {
  die("Mobile detected");
}
?>

It should just display the text "Mobile detected" (when you use a mobile browser) and nothing else.

[Ruud]

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 Expand


<?php
if (isMobile()) {
  die("Mobile detected");
}
?>

It should just display the text "Mobile detected" (when you use a mobile browser) and nothing else.

[acdc1]

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 Expand

<?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 Expand



-------------- 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!

[N1kko]

Rudd I must say I have just tried this snippet and works a treat 

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 Expand

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

and call the stylesheets with this

Code Select Expand

<?php $template = isMobile() ? '/mobile.css' : '/maintemplate.css'; ?>
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR.$template; ?>" media="screen" />