DFP（DoubleClick for Publishers）：实现响应式广告展示

针对你遇到的固定宽高iframe广告问题，其实有两种更灵活的响应式实现方案，不用枚举所有屏幕尺寸，完全适配当前GPT的最佳实践：

方案1：使用尺寸映射（Size Mapping）适配主流断点 #

这种方式通过定义主流设备视口的尺寸匹配规则，让Ad Manager自动根据当前屏幕选择最合适的广告尺寸，同时支持流体兜底：

修改后的Head代码 #

// Head
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
googletag.cmd.push(function() {
  // 创建尺寸映射，覆盖主流设备断点
  var sizeMap = googletag.sizeMapping()
    .addSize([768, 0], [[728, 60], [970, 250]]) // 桌面端（视口宽≥768px）
    .addSize([320, 0], [[375, 60], [320, 50]])  // 移动端（视口宽≥320px）
    .addSize([0, 0], 'fluid')                   // 兜底：适配所有其他情况的流体尺寸
    .build();

  var adSlot = googletag.defineSlot('/xxxxxx/Mobile_ad', [[375, 60], [728, 60]], 'div-gpt-ad-154504231384304-0')
    .defineSizeMapping(sizeMap) // 应用尺寸映射规则
    .addService(googletag.pubads());

  googletag.pubads().enableSingleRequest();
  googletag.pubads().enableResponsiveAds(); // 启用响应式广告核心逻辑
  googletag.enableServices();
});
</script>

修改后的Body代码 #

// Body
<div style="width: 100%; margin-bottom: 10px;">
  <div id='div-gpt-ad-154504231384304-0' style="min-width: 320px; max-width: 100%;">
    <script>
      googletag.cmd.push(function() {
        googletag.display('div-gpt-ad-154504231384304-0');
      });
    </script>
  </div>
</div>

方案2：使用后台配置的响应式广告单元（更省心） #

如果你的Ad Manager后台支持，直接创建响应式广告单元，配置好允许的宽高范围，前端只需调用流体尺寸即可，不用写复杂的sizeMapping：

修改后的Head代码 #

// Head
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
googletag.cmd.push(function() {
  // 直接引用后台配置的响应式广告单元，使用fluid尺寸
  var adSlot = googletag.defineSlot('/xxxxxx/Responsive_Mobile_ad', 'fluid', 'div-gpt-ad-154504231384304-0')
    .addService(googletag.pubads());

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

Body代码和方案1一致 #

容器保持100%宽度，确保广告能自适应父容器。

关键注意事项 #

• 确保广告单元在Ad Manager后台已经配置了对应的尺寸（包括流体尺寸，如果使用方案2）。
• 容器CSS必须设置为width: 100%，避免固定宽高限制广告的响应式表现。
• 彻底放弃同步渲染的自定义HTML方案，GPT的异步加载是当前官方唯一推荐的方式，性能和兼容性更好。
• 若需要监听视口变化重新加载广告，可以结合window.resize事件调用googletag.pubads().refresh([adSlot])，但一般情况下Ad Manager会自动处理。

内容的提问来源于stack exchange，提问作者Sougata Bose