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

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

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

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

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

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

尽管看起来很简单，但这是一个非常棘手的问题。

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

此库允许您检测：

• 是移动设备、平板电脑或台式机
• 特定浏览器版本
• 操作系统

您可以使用CSS3媒体查询、

//中等+屏幕尺寸

@介质（最小宽度：992px）｛

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

}

//小屏幕

@介质（最大宽度：991px）｛

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

}

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

//仅大分辨率

@介质（最小宽度：1200px）{。。。}

此外，如果您正在使用任何前端框架，如bootstrap。然后你可以找到一些像这样的书面类

.可视电话.可见片剂

.可见桌面

.隐藏电话

.隐藏平板电脑

.隐藏的桌面

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

http://getbootstrap.com/2.3.2/scaffolding.html