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

【问题标题】：How can I make an ad visible only to mobile users?如何使广告仅对移动用户可见？
【发布时间】：2015-06-07 06:41:29
【问题描述】：

我想使用一些移动广告，但我的网站采用响应式设计，所以我没有使用 m.子域。如何使广告仅对移动用户可见？仅适用于台式机或平板电脑呢？

我使用 wordpress 作为 CMS。

谢谢，

【问题讨论】：

【解决方案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
    }
});

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

一种方法是使用媒体查询。将广告默认设置为 display:none 并添加 display:block 仅在移动媒体查询中。

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

【讨论】：

【解决方案4】：

尽管看似简单却是一个相当棘手的问题。

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

此库允许您检测：

【讨论】：

【解决方案5】：

您可以使用 CSS3 媒体查询来做到这一点，

//中等+屏幕尺寸

@media (最小宽度:992px) {

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

}

//小屏幕尺寸

@media（最大宽度：991px）{

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

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

}

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

//仅限大分辨率

@media（最小宽度：1200px）{ ... }

此外，如果您使用任何前端框架，如引导程序。然后你可以找到一些书面课程，如

.可见电话 .visible-tablet

.可见桌面

.隐藏电话

.隐藏的平板电脑

.隐藏桌面

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

【讨论】：