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

N1kko · « **Reply #25 on:** July 25, 2012, 11:35:40 PM »

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]

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

acdc1 · « **Reply #26 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!

Ruud · « **Reply #27 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.

acdc1 · « **Reply #28 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 ;-(

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

acdc1 · « **Reply #29 on:** September 14, 2012, 06:07:15 PM »

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

Ruud · « **Reply #30 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.

Ruud · « **Reply #31 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.

acdc1 · « **Reply #32 on:** September 17, 2012, 12:36:40 PM »

Thanx!

N1kko · « **Reply #33 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

Ruud · « **Reply #34 on:** September 21, 2012, 06:06:06 PM »

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.

N1kko · « **Reply #35 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

G4 · « **Reply #36 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?

MdemiC · « **Reply #37 on:** February 22, 2013, 02:13:37 PM »

I also whant to know what G4 ask!

Ruud · « **Reply #38 on:** February 22, 2013, 02:22:47 PM »

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.

svsanchez · « **Reply #39 on:** January 16, 2014, 07:19:21 AM »

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.

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?

Ruud · « **Reply #40 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>

svsanchez · « **Reply #41 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?

Ruud · « **Reply #42 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" />

svsanchez · « **Reply #43 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)?

Ruud · « **Reply #44 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

svsanchez · « **Reply #45 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...

Ruud · « **Reply #46 on:** January 17, 2014, 10:30:58 AM »

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.

svsanchez · « **Reply #47 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

dbs · « **Reply #48 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 ...
} ?>

Ruud · « **Reply #49 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.

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

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