Question

我已按照各种指南介绍如何针对不同的分辨率展示不同的广告。这在一定程度上工作正常。

如果您访问以下网站并且分辨率介于768和900之间，则应注意排行榜广告上的一些水平滚动。如果另一个广告发挥作用，我将如何相应地调整大小直到断点（768px宽）？

在第二个广告中，我想应用类似的原则。

测试网站： https://www.iq-mag.net/dfp.php

代码：

<html>
<head>
<title>GPT Training - Responsive Test Page</title>
<script async src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];

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

  var leaderboard1 = googletag.sizeMapping().addSize([0, 0], [456, 349]).addSize([768, 200], [900, 200]).build();
  var mpu1 =           googletag.sizeMapping().addSize([0, 0], [241, 198]).addSize([768, 200], [376, 310]).build();

  gptAdSlots[0] = googletag.defineSlot('/210178423/Desktop_Leaderboard', [456,349], 'MobileLeaderboard').defineSizeMapping(leaderboard1).addService(googletag.pubads());
  gptAdSlots[1] = googletag.defineSlot('/210178423/MPU', [241,198], 'MobileMPU').defineSizeMapping(mpu1).addService(googletag.pubads());
  googletag.enableServices();
 });
</script>
<style>
#MobileLeaderboard,#MobileMPU {border:10px green dashed;}
#MobileLeaderboard {width:900px}
#MobileMPU{width:376px}
@media screen and (max-device-width: 768px){
  #MobileLeaderboard {width:456px}
  #MobileMPU {width:241px}
}
}
</style>
</head>
<body>
<h1>Leaderboard</h1>
<div id="MobileLeaderboard">
<script>
 googletag.cmd.push(function() {
   googletag.display('MobileLeaderboard');
 });
</script>
</div>
<h1>MPU</h1>
<div id="MobileMPU">
<script>
 googletag.cmd.push(function() {
   googletag.display('MobileMPU');
 });
</script>
</div>
</body>
</html>

Google DFP广告管理系统 - 如何让广告单元真正响应

0 个答案: