仅在台式机上显示 AdSense 广告并在手机上隐藏答案

【问题标题】：Displaying an adsense ad on desktops only and hiding it on mobiles仅在台式机上显示 AdSense 广告并在手机上隐藏
【发布时间】：2015-06-27 19:08:48
【问题描述】：

我制作了这个 AdSense 广告并使用 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>

【问题讨论】：

我添加了一个示例，如果有帮助请告诉我。

标签： html css jquery-mobile mobile adsense

【解决方案1】：

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

添加这个：

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

然后使用这个：

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

请注意，免费时您只能使用 WURFL 的 5 种功能，详情请查看网站。

【讨论】：

【解决方案2】：

min-width: 500px 对于除了极少数手机之外的所有手机来说都太高了，这是平板电脑的领域。请记住，虽然分辨率可能相当高，但所谓的视口（浏览分辨率）要小 1.5 倍、2 倍甚至 3 倍。大多数手机的视口宽度为 320 或 360（即使全高清也可能只有 640x360，每个浏览器像素为 3x3 实际像素）。简单来说，max-width: 500px 应该这样做

【讨论】：