javascript - 如何使 Adsense 广告与响应式网站配合使用

Question

我查看了当前的解决方案，这两个帖子已经部分解决了这个问题； Making Adsense Responsive和 In javascript 'If mobile phone'

我有一个响应式网站，唯一在手机上无法正常运行的是我页面上的横向 Google 广告，由于它比其他所有内容都大，所以一开始它会以额外的空间突出显示。

我正在寻找是否有人有可行的解决方案，以便我基本上可以在这个大横幅和适用于屏幕尺寸较小且不会破坏我的响应式网站的移动浏览器的较小格式之间切换。

我目前的解决方案是拉近屏幕尺寸并在低于特定阈值时显示较小的广告。有没有更好的办法？

Answer 1

您可以将此代码用于 AdSense，这不违反 TOS，因为它不会“即时”更改广告，您只是根据屏幕尺寸提供广告，而不是更改广告本身。

<script type="text/javascript">


    var width = window.innerWidth 
        || document.documentElement.clientWidth 
        || document.body.clientWidth;

    google_ad_client = "ca-publisher-id";

    if (width > 800) {
        // Activa el anuncio "Leaderboard" de 728x90 para pantallas anchas
        google_ad_slot = "ad-unit-1"; 
        google_ad_width = 728; 
        google_ad_height = 90;
    } else if ((width <= 800) && (width > 400)) { 
        // Activa el anuncio "Banner" de 468x60 para pantallas pequeñas (móviles) 
        google_ad_slot = "ad-unit-3"; 
        google_ad_width = 468; 
        google_ad_height = 60;
    } else { 
        // Activa el anuncio "Medium Rectangle" de 300x250 para medianas (tablets)
        google_ad_slot = "ad-unit-2"; 
        google_ad_width = 300; 
        google_ad_height = 250;
    }

</script>

<script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

这一个是针对 DFP 的:

var width = window.innerWidth 
    || document.documentElement.clientWidth 
    || document.body.clientWidth;
if (width >= 800) {
    // Activa el anuncio "Leaderboard" de 728x90 para pantallas anchas
    document.write('<div id="div-gpt-ad-1234567891234-1" style="width:728px; height:90px;"">');
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1234567891234-1'); });
    document.write('</div>');

} else if ((width < 800) && (width > 400)) { 
    // Activa el anuncio "Medium Rectangle" de 300x250 para medianas (tablets) 
    document.write('<div id="div-gpt-ad-1234567891234-2" style="width:300px; height:250px;"">');
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1234567891234-2'); });
    document.write('</div>');

} else { 
    // Activa el anuncio "Banner" de 468x60 para pantallas pequeñas (móviles) 
    document.write('<div id="div-gpt-ad-1234567891234-3" style="width:468px; height:60px;"">');
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1234567891234-3'); });
    document.write('</div>');
}