如何使广告仅对移动用户可见？

Question

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 1

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
    }
});

Answer 2

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) { }

Answer 3

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;
}
} 

Answer 4

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;
• ...

Answer 5

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