Google DFP广告管理系统响应不起作用

Question

Would anyone mind looking over my code I have, trying to make my DFP ads responsive as my websites are all responsive? I follow the example on Google DFP, and the ad doesn't seem to shrink when I tried mobile screen (and not showing up on real mobile screen at all) the code below is in my Header file.

I'm pretty sure I mapped thing correctly. I wonder if I have to make any changes to my body code also, or if I have to upload new creatives which has the adjusted size to fit mobile screen?

<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 mapping = googletag.sizeMapping().
    addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //desktop
    addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet
    addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //mobile
    addSize([0, 0], [[320, 50], [1, 1]]). //other
    build();

   slot1 = googletag.defineSlot('/316721235/DL-TestAds', [728, 90], 'div-gpt-ad-1496860907063-0').defineSizeMapping(mapping).addService(googletag.pubads());
    googletag.pubads().enableAsyncRendering();
    googletag.enableServices();
  });
</script>

Answer 1

You must detect when the browser window size changes yourself, then trigger the ads to be redisplayed by calling refresh.

Listen to the resize event to detect when the browser window changes size.

window.addEventListener('resize', function (event) { // Check window.documentElement.clientWidth

}

Answer 2

+1 to BeWarned for his answer : the responsive mapping is set at the page load. If the size of the window is amended, then you should relaunch the ad slots calls so DFP will be able to call the correct ad size.