-1

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,

Flaviu
  • 47
  • 8
  • 1
    Show/hide them with [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)? – naththedeveloper Apr 02 '15 at 10:35
  • I wouldn't use media queries for ads but get them after the page has finished loading using javascript. You don't want to load ads you are not going to display and you don't want ads to slow down your initial page load. – jeroen Apr 02 '15 at 10:41

5 Answers5

2

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
    }
});
mohamedrias
  • 18,326
  • 2
  • 38
  • 47
  • You would not want to load something and then not using it, especially on mobile and poor connections. So this solution although it looks simple, it will have a performance impact. – Alexandru Guzinschi Apr 02 '15 at 11:01
  • Unless you construct the HTML in the server and send it to the client, the client will get the content and restrict whether to display/not. Else you must trigger ajax call based on browser sniffing to fetch the add content. – mohamedrias Apr 02 '15 at 11:05
  • I've updated answer with another approach as well :) – mohamedrias Apr 02 '15 at 11:09
0

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) { }
Anshuk
  • 91
  • 8
0

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;
}
}
Shree
  • 21
  • 1
0

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;
  • ...
rtf_leg
  • 1,789
  • 1
  • 15
  • 27
0

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

Nilesh Mahajan
  • 3,506
  • 21
  • 34