'How can I make an ad visible only to mobile users?

I want to use some mobile ads but my website has responsive design so I don't use the m. subdomain. How can I make an ad visible only to mobile users? What about only to desktop or tablet?

I'm using wordpress as a CMS.

Thanks,

javascriptphphtmlwordpress


Solution 1:[1]

Please use css media queries. you can show and hide specific div for mobile devices.

 @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) { }

Solution 2:[2]

One way is to use media queries. Make the ads as display:none by default and add display:block only in media queries for mobile.

.ads{
  display:none;
}
@media (max-width:480px){
.ads{
  display:block;
}
}

Solution 3:[3]

Despite the seeming simplicity is quite a tricky question.

Try not to waste time (which has already been spent by other developers) and use one of the existing solutions like isMobile or mobile-detect.js.

This libraries allows you to detect:

  • is mobile, tablet or desktop;
  • specific browser version.
  • operating system;
  • ...

Solution 4:[4]

You can do it using CSS3 media queries,

//medium+ screen sizes

@media (min-width:992px) {

.desktop-only {
    display:block !important;
}

}

//small screen sizes

@media (max-width: 991px) {

.mobile-only {
    display:block !important;
}

.desktop-only {
    display:none !important;
}

}

for large resolution devices you can use following media queries,

//large resolutions only

@media (min-width: 1200px) { ... }

Also if you are using any front-end framework like bootstrap. then you can find some written classes like

.visible-phone .visible-tablet

.visible-desktop

.hidden-phone

.hidden-tablet

.hidden-desktop

using these classes you can play around your content to show and hide on specific devices.

http://getbootstrap.com/2.3.2/scaffolding.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anshuk
Solution 2 Shree
Solution 3 rtf_leg
Solution 4 Nilesh Mahajan

Related Questions