html - 仅在台式机上显示 adsense 广告并在手机上隐藏它

标签 html css jquery-mobile mobile adsense

我创建了这个 AdSense 广告并使用了 position: relative 来放置它。我只需要此广告显示在台式机上而不是移动设备上。然而,此时广告也在手机上显示,因为我使用了“position:relative”,它被显示在边界之外。关于如何在台式机上显示此广告并在手机上隐藏它的任何想法?谢谢。

<div style="position: relative; left: 700px; top:-100; ">

<style>
.test-ad { width: 728px; height: 90px; }
@media(min-width: 500px) { .test-ad { display: none; } }
@media(min-width: 800px) { .test-ad { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- test-ad -->
<ins class="adsbygoogle test-ad"
     style="display:inline-block"
     data-ad-client="XXXXXXXXXX"
     data-ad-slot="XXXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

最佳答案

检查用户代理是否为移动浏览器然后不显示它们。您可以使用 WURFL.js 用于用户代理检测的 api。

添加这个:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

然后使用这个:

<script>
if(!WURFL.is_mobile){
      //display ads
}
</script>

请注意,免费版中您只能使用 WURFL 的 5 种功能,请查看网站了解更多详情。

关于html - 仅在台式机上显示 adsense 广告并在手机上隐藏它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31084844/

相关文章:

javascript - 检测 Html 元素是否与另一个 Html 元素重叠

html - 如何在 HTML 中使用 MathML

jquery - 隐藏/显示 div 内的 div ?典型的

html - Sass mixin 输出 css 与 calc 不同的输出比手工简化

javascript - 使用 jQuery 同时设置两个下拉列表的选定值

javascript - 在加载程序后面添加背景以隐藏加载屏幕

javascript - JS 加载外部 HTML,该 HTML 应该加载 HTML 的资源(CSS 和 JS)

html - 围绕表格包装文章元素

javascript - CSS 转换在 IE-11 中不起作用

ipad - iPad 上的 jQuery Mobile 过渡缓和