在 DFP 广告管理系统中根据浏览器宽度更改广告尺寸

在 DFP 广告管理系统标准版/DoubleClick 中，我为具有三种不同尺寸的广告单元生成了以下广告代码，并为每种指定尺寸生成了一个广告素材。因此，广告单元有三种不同的尺寸，当您点击刷新时，广告会更改为我指定的三种广告尺寸之一。这很好用，但这不是我想要广告做的，

我希望广告能够做到这一点：

我希望广告根据浏览器宽度更改尺寸，例如，如果观看者的浏览器宽度大于 800px，则以最大指定尺寸显示广告，如果浏览器宽度在 600-800 之间，则使用第二大指定尺寸指定广告尺寸，最后，如果广告小于 600 像素，则使用最小的广告尺寸...广告应根据浏览器宽度的变化相应地更改尺寸。 800、600-800 和小于 600 不是实际尺寸，只是示例尺寸，但无论如何，这三个广告尺寸均在此行中指定：

googletag.defineSlot('/16569348/Different-Sizes-Unit-Test', [[292, 195], [310, 207], [345, 230]], 'div-gpt-ad-1363309773051-0').addService(googletag.pubads());

这是完整的代码：

<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
 gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') + 
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>

 <script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/16569348/Different-Sizes-Unit-Test', [[292, 195], [310, 207],     [345, 230]], 'div-gpt-ad-1363309773051-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>

<!-- Different-Sizes-Unit-Test -->
<div id='div-gpt-ad-1363309773051-0'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1363309773051-0'); });
</script>

`

这是此代码的 jsfiddle（点击运行或刷新以查看广告随机改变大小）：

http://jsfiddle.net/Zkm5j/

再次强调，我希望广告能够根据浏览器宽度尺寸/变化相应地改变尺寸。如果有人能帮助我想出一种方法来实现这一目标，那对我来说确实意义重大！ :)

您应该使用 DFP 广告管理系统提供的映射功能

以下是一个页面上有 5 个广告单元的示例。 第 1 步：定义每个广告单元的所有可能尺寸。在 DFP 广告管理系统的广告单元设置中定义这些尺寸。 第 2 步：决定哪个广告单元将在哪个视口上使用哪种尺寸。使用变量 megaboardsize、firstsize 等创建尺寸映射，如下面的代码所示。 步骤 3：定义插槽和适当的已定义映射，如下所示。

在示例中，尺寸将在广告单元中投放，如下所示：广告单元 - example-megaboard：在视口宽度超过 970 像素的设备上：970x90、970x250、728x90。在视口宽度超过 728 像素的设备上：728x90。在所有具有较小视口的设备上：320x100,320x50广告单元 - /XXX/example-300x250-1st：在视口宽度超过 920px 的设备上：300x250,300x600。在视口宽度超过 300 像素的设备上：300x250。在所有具有较小视口的设备上：无广告。

等等...

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script>
var gptAdSlots = [];
googletag.cmd.push(function() {

    var megaboardsize = googletag.sizeMapping().addSize([970, 0], [[970,90],[970,250],[728,90]]).addSize([728, 0], [728, 90]).addSize([0, 0], [[320, 100],[320,50]]).build();
    var firstsize = googletag.sizeMapping().addSize([920, 0], [[300,250],[300,600]]).addSize([300, 0],[300,250]).addSize([0, 0], []).build();
    var secondsize = googletag.sizeMapping().addSize([920, 0], [300,250]).addSize([0, 0],[]).build();  
    var thirdsize = googletag.sizeMapping().addSize([920, 0], [300,250]).build();  
    var fourthsize = googletag.sizeMapping().addSize([690, 0], [300,250]).addSize([0, 0],[]).build();

    gptAdSlots[0] = googletag.defineSlot('/XXX/example-megaboard', [[970, 90], [320, 100], [320, 50], [728, 90], [970, 250]], 'gpt-megaboard').defineSizeMapping(megaboardsize).addService(googletag.pubads());

    gptAdSlots[1] = googletag.defineSlot('/XXX/example-300x250-1st', [[300, 600], [300, 250]], 'gpt-1st').defineSizeMapping(firstsize).addService(googletag.pubads());

    gptAdSlots[2] = googletag.defineSlot('/XXX/example-300x250-2nd', [300, 250], 'gpt-2nd').defineSizeMapping(secondsize).addService(googletag.pubads());

    gptAdSlots[3] = googletag.defineSlot('/XXX/example-300x250-3rd', [300, 250], 'gpt-3rd').defineSizeMapping(thirdsize).addService(googletag.pubads());

    gptAdSlots[4] = googletag.defineSlot('/XXX/example-300x250-4th', [300, 250], 'gpt-4th').defineSizeMapping(fourthsize).addService(googletag.pubads());

    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
  });
</script>