Detect Mobile devices

List overview All Threads
Download

newer

older

how to retrieve all entities...

Drupal fields

Néstor

11 Mar 2014 11 Mar '14

11:09 p.m.

I need information on how to detect mobile devices on our desktop site and once detected then display a splash or page or redirect the user to a page

The page or splash will have information that will ask the user to either continue to the desktop site or to go to the "APP store" (android, Iphone). I will also set a cookie so the user does not get this page/splas over and over.

Now, I managed to add some code on my page.tpl.ph that check the HTTP_USER_AGENT it will set a cookie and then it will redirect them to another page (mobileandoir or mobileiphone)

This is working fine but I was wondering if there are site out there done in Drupal that have a similar system set in place.

Can anyone provide information about this and how other people have done it..

I am using Drupal 6

Thanks,

Rotsen

Attachments:

attachment.html (text/html — 1.0 KB)

Show replies by date

Jamie Holly

11 Mar 11 Mar

11:24 p.m.

Redirecting them isn't really a great idea. You end up frustrating more people than it's worth. The better option is a banner that displays at the top of the page. Here's how I've done it in the past for clients:

<body>

css:

#my-app-banner { display:none; position:absolute; top:0; left:0; width:100%; (whatever else you want) }

.show-app-banner { padding-top: {same height as your banner} }

.show-app-banner #my-app-banner { display:block; }

Javascript:

if (navigator.userAgent.match(/Android|iPhone|iPad|iPod/i)) { $('body').addClass('show-app-banner'); }

Depending on your theme you will have to play with the css. Best thing about this approach is you can easily do it in a module or the theme and even exclude pages by path. And since this is targetting smartphones with support for modern CSS, you can really design something nice in pure CSS (gradients, shadows, border radius, etc.), plus use CSS3 transitions to animate things.

Also adding a close button is considered very friendly.

Jamie Holly http://hollyit.net

On 3/11/2014 7:09 PM, Néstor wrote:

...

I need information on how to detect mobile devices on our desktop site and once detected then display a splash or page or redirect the user to a page

The page or splash will have information that will ask the user to either continue to the desktop site or to go to the "APP store" (android, Iphone). I will also set a cookie so the user does not get this page/splas over and over.

Now, I managed to add some code on my page.tpl.ph http://page.tpl.ph that check the HTTP_USER_AGENT it will set a cookie and then it will redirect them to another page (mobileandoir or mobileiphone)

This is working fine but I was wondering if there are site out there done in Drupal that have a similar system set in place.

Can anyone provide information about this and how other people have done it..

I am using Drupal 6

Thanks,

Rotsen

Néstor

12 Mar 12 Mar

2:10 p.m.

Jaime,

That sounds like the right solution.

Is there a better place to put that code than on the main page? Because I want to display the banner to any mobile devices that come in to any of the pages in the site.

Thanks,

Rotsen

On Tue, Mar 11, 2014 at 4:24 PM, Jamie Holly hovercrafter@earthlink.netwrote:

...

Redirecting them isn't really a great idea. You end up frustrating more people than it's worth. The better option is a banner that displays at the top of the page. Here's how I've done it in the past for clients:

<body>

<div id="my-app-banner">yada yada yada</div> </body>

css:

#my-app-banner { display:none; position:absolute; top:0; left:0; width:100%; (whatever else you want) }

.show-app-banner { padding-top: {same height as your banner} }

.show-app-banner #my-app-banner { display:block; }

Javascript:

if (navigator.userAgent.match(/Android|iPhone|iPad|iPod/i)) { $('body').addClass('show-app-banner'); }

Depending on your theme you will have to play with the css. Best thing about this approach is you can easily do it in a module or the theme and even exclude pages by path. And since this is targetting smartphones with support for modern CSS, you can really design something nice in pure CSS (gradients, shadows, border radius, etc.), plus use CSS3 transitions to animate things.

Also adding a close button is considered very friendly.

Jamie Hollyhttp://hollyit.net

On 3/11/2014 7:09 PM, Néstor wrote:
 I need information on how to detect mobile devices on our desktop
site and once detected then display a splash or page or redirect the user to a page

The page or splash will have information that will ask the user to either continue to the desktop site or to go to the "APP store" (android, Iphone). I will also set a cookie so the user does not get this page/splas over and over.

Now, I managed to add some code on my page.tpl.ph that check the HTTP_USER_AGENT it will set a cookie and then it will redirect them to another page (mobileandoir or mobileiphone)

This is working fine but I was wondering if there are site out there done in Drupal that have a similar system set in place.

Can anyone provide information about this and how other people have done it..

I am using Drupal 6

Thanks,

Rotsen

-- [ Drupal support list | http://lists.drupal.org/ ]

Jamie Holly

2:20 p.m.

Put the actual banner HTML at the bottom of your theme's page.tpl.php file or add it to page_bottom in a page_alter hook in your theme. Then just include the javascript on any path/page you want it to load on.

Jamie Holly http://hollyit.net

On 3/12/2014 10:10 AM, Néstor wrote:

...

Jaime,

That sounds like the right solution.

Is there a better place to put that code than on the main page? Because I want to display the banner to any mobile devices that come in to any of the pages in the site.

Thanks,

Rotsen

On Tue, Mar 11, 2014 at 4:24 PM, Jamie Holly <hovercrafter@earthlink.net mailto:hovercrafter@earthlink.net> wrote:

Redirecting them isn't really a great idea. You end up frustrating
more people than it's worth. The better option is a banner that
displays at the top of the page. Here's how I've done it in the
past for clients:

<body>

<div id="my-app-banner">yada yada yada</div>
</body>

css:

#my-app-banner {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
(whatever else you want)
}

.show-app-banner {
    padding-top: {same height as your banner}
}

.show-app-banner #my-app-banner {
display:block;
}

Javascript:

if (navigator.userAgent.match(/Android|iPhone|iPad|iPod/i)) {
    $('body').addClass('show-app-banner');
}


Depending on your theme you will have to play with the css. Best
thing about this approach is you can easily do it in a module or
the theme and even exclude pages by path. And since this is
targetting smartphones with support for modern CSS, you can really
design something nice in pure CSS (gradients, shadows, border
radius, etc.), plus use CSS3 transitions to animate things.

Also adding a close button is considered very friendly.

Jamie Holly
http://hollyit.net

On 3/11/2014 7:09 PM, Néstor wrote:

...

I need information on how to detect mobile devices on our desktop
site and
once detected then display a splash or page or redirect the user
to a page


The page or splash will have information that will ask the user
to either continue to
the desktop site or to go to the "APP store"  (android, Iphone). 
I will also set a cookie
so the user does not get this page/splas over and over.

Now, I managed to add some code on my page.tpl.ph
<http://page.tpl.ph> that check the HTTP_USER_AGENT
it will set a cookie and then it will redirect them to another
page (mobileandoir or mobileiphone)

This is working fine but I was wondering if there are site out
there done in Drupal that have
a similar system set in place.

Can anyone provide information about this and how other people
have done it..

I am using Drupal 6

Thanks,

Rotsen

--
[ Drupal support list | http://lists.drupal.org/ ]

Néstor

3:29 p.m.

OK,

THANKS!!!

:-)

On Wed, Mar 12, 2014 at 7:20 AM, Jamie Holly hovercrafter@earthlink.netwrote:

...

Put the actual banner HTML at the bottom of your theme's page.tpl.php file or add it to page_bottom in a page_alter hook in your theme. Then just include the javascript on any path/page you want it to load on.

Jamie Hollyhttp://hollyit.net

On 3/12/2014 10:10 AM, Néstor wrote:

Jaime,

That sounds like the right solution.

Is there a better place to put that code than on the main page? Because I want to display the banner to any mobile devices that come in to any of the pages in the site.

Thanks,

Rotsen

On Tue, Mar 11, 2014 at 4:24 PM, Jamie Holly hovercrafter@earthlink.netwrote:

...
Redirecting them isn't really a great idea. You end up frustrating more people than it's worth. The better option is a banner that displays at the top of the page. Here's how I've done it in the past for clients:

<body>

<div id="my-app-banner">yada yada yada</div> </body>

css:

#my-app-banner { display:none; position:absolute; top:0; left:0; width:100%; (whatever else you want) }

.show-app-banner { padding-top: {same height as your banner} }

.show-app-banner #my-app-banner { display:block; }

Javascript:

if (navigator.userAgent.match(/Android|iPhone|iPad|iPod/i)) { $('body').addClass('show-app-banner'); }

Depending on your theme you will have to play with the css. Best thing about this approach is you can easily do it in a module or the theme and even exclude pages by path. And since this is targetting smartphones with support for modern CSS, you can really design something nice in pure CSS (gradients, shadows, border radius, etc.), plus use CSS3 transitions to animate things.

Also adding a close button is considered very friendly.

Jamie Hollyhttp://hollyit.net

On 3/11/2014 7:09 PM, Néstor wrote:
 I need information on how to detect mobile devices on our desktop
site and once detected then display a splash or page or redirect the user to a page

The page or splash will have information that will ask the user to either continue to the desktop site or to go to the "APP store" (android, Iphone). I will also set a cookie so the user does not get this page/splas over and over.

Now, I managed to add some code on my page.tpl.ph that check the HTTP_USER_AGENT it will set a cookie and then it will redirect them to another page (mobileandoir or mobileiphone)

This is working fine but I was wondering if there are site out there done in Drupal that have a similar system set in place.

Can anyone provide information about this and how other people have done it..

I am using Drupal 6

Thanks,

Rotsen

-- [ Drupal support list | http://lists.drupal.org/ ]
-- [ Drupal support list | http://lists.drupal.org/ ]

4366

Age (days ago)

4367

Last active (days ago)

support@drupal.org

4 comments

2 participants

tags (0)

participants (2)

Jamie Holly
Néstor