[support] Detect Mobile devices

Jamie Holly hovercrafter at earthlink.net
Tue Mar 11 23:24:07 UTC 2014


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

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.drupal.org/pipermail/support/attachments/20140311/884ea061/attachment.html 


More information about the support mailing list