Question

我想使用一些移动广告，但我的网站有响应式设计，所以我不使用m。子域。如何才能让广告仅向移动用户展示？那么桌面或平板电脑呢？

我使用wordpress作为CMS。

谢谢，

Answer 1

使用CSS3 Media Queries非常容易。

在你的CSS中：

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

对于较大的设备，请隐藏它：

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

如果您真的担心要下载的数据，那么您必须在页面加载时检测浏览器大小，如果它小于特定宽度，则触发ajax调用并获取广告数据并将其显示在占位符中容器

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

Answer 2

请使用css媒体查询。您可以显示和隐藏移动设备的特定div。

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

Answer 3

一种方法是使用媒体查询。将广告设为display：none默认情况下，仅在移动设备的媒体查询中添加display：block。

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

Answer 4

尽管看似简单是一个非常棘手的问题。

尽量不浪费时间（已经由其他开发人员使用）并使用现有解决方案之一，例如isMobile或mobile-detect.js。

此库允许您检测：

Answer 5

您可以使用CSS3媒体查询

来完成

//中等+屏幕尺寸

@media（min-width：992px）{

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

}

//小屏幕尺寸

@media（max-width：991px）{

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

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

}

对于大分辨率设备，您可以使用以下媒体查询，

//仅限大分辨率

@media（min-width：1200px）{ ... }

此外，如果您使用任何前端框架，如bootstrap。然后你可以找到一些像

这样的书面课程

。可见，电话。可见片剂

。可见的桌面

.hidden电话

.hidden片剂

.hidden-桌面

使用这些课程，您可以播放您的内容，以便在特定设备上显示和隐藏。