[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