How to show message on mobile devices only

[baldidiot]

In light of Betfred's new mobile only £10 no deposit free bet I want to somehow show a message or banner only to users that are using a mobile device (eg: phone/tablet).

Any bright ideas? These would be to go on non-mobile sites that are either responsive or have no mobile version. Ideally not a pop-up as I've found they get dismissed pretty easily, so preferable a banner that sits at the bottom of the screen (or something that I can use to insert a 'message' module at the start/end of articles).

Note: Typo in subject - I meant to say "How to show message on mobile devices only"

[Scampi]

Hi,
Interesting question. I had a quick look and found this site: http://thepluginfactory.co/community...-devices-only/

I haven't had a proper look at the plugin yet, but it looks pretty good.

[baldidiot]

Hi,
Interesting question. I had a quick look and found this site: http://thepluginfactory.co/community...-devices-only/

I haven't had a proper look at the plugin yet, but it looks pretty good.

Cheers Joe. Ideally I'd like to avoid plugins if possibly - especially as a lot of my sites don't use wordpress... appreciate the suggestion though.

[Renee]

Can you not just detect the user-agent and show the banner at the bottom of the screen based on that?

I'm sure you could implement just a plain old banner overlay using CSS or something.

[TheGooner]

Yes - "detecting the user-agent" is the term used to describe what you are looking for. Do a google search and get 1000's of results.

It's not rocket science - but it's not straight-forward HTML either. You will have to use some programming (PHP or javascript) to check the request that the browser sends to determine if it's a mobile device. Then vary your page according to the results.

[baldidiot]

Ah, cheers guys - I knew there was a way to do it but I just couldn't think of the correct terminology.

Happy to play with a bit of java/php so I'll see what I can dish up!

[casinoplanet]

I would suggest a responsive solution, by using a media query in css.

Example of a media query in the css file, using a class which will only show on screens smaller than 500px:
@media screen and (min-width: 500px) {
.mobile {display: none;}}

Then add the class "mobile" to the website section or div which is intended for mobile visitors and you're done. The offer will only be visible for visitors on small screens. Of course you can adjust the width and also add more of these criteria for eg small phones, regular phones, tablets etc.

[baldidiot]

I would suggest a responsive solution, by using a media query in css.

Example of a media query in the css file, using a class which will only show on screens smaller than 500px:
@media screen and (min-width: 500px) {
.mobile {display: none;}}

Then add the class "mobile" to the website section or div which is intended for mobile visitors and you're done. The offer will only be visible for visitors on small screens. Of course you can adjust the width and also add more of these criteria for eg small phones, regular phones, tablets etc.

Cheers, I'll give this a go also!