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,

Answer

It’s quite easy using CSS3 Media Queries.

In your CSS:

@media (max-width: 480px) {
      #ad-id {
         display: block;
      }
}

For bigger devices, hide it:

@media (min-width: 480px) {
     #ad-id {
        display: none;
     }
}

If you are really concerned about data being downloaded, then you must detect the browser size on page load, if it’s less than particular width then fire an ajax call and fetch the ad data and display it inside the placeholder container.

$(function() {
    if($(window).width() < 480) {
       $("#ad-id").load("adcontent.html");
       // else use $.ajax for this purpose
    }
});