[support] Detect Mobile devices

Jamie Holly hovercrafter at earthlink.net
Wed Mar 12 14:20:49 UTC 2014


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 at earthlink.net <mailto:hovercrafter at 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/ ]
>
>
>
>

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


More information about the support mailing list