插页式 DFP 广告未填满屏幕答案

【问题标题】：Interstitial DFP ad doesn't fill the screen插页式 DFP 广告未填满屏幕
【发布时间】：2016-07-29 09:41:50
【问题描述】：

我尝试在我的应用程序 (iOS) 的启动屏幕之后集成插页式广告。它与 Google 提供的用于测试的广告按预期工作。我的问题是创建自己的广告素材。

由于插页式广告只有 4 种授权尺寸（320x480、480x320、768x1024 和 1024x768），我不知道如何为 iPhone 5、6...设置图像或将 320x480 图像缩放为全屏。

我尝试制作一个 HTML5 广告素材来调整图片大小以适应屏幕，但它仍然是 320x480：

这是 HTML 5 的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>ad</title>
    <script type="text/javascript">
      var clickTag = "http://www.google.com";
    </script>
    <style type="text/css" media="screen">

html{
  background-color: #CCC;
}
body{
  /* Workaround for some mobile browsers */
  min-height:100%;
} 
.className {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
}
    </style>
  </head>
  <body>
  <a href="javascript:window.open(window.clickTag)">
    <img src="image.png" class="className" />
  </a>
  </body>
</html>

我知道可以创建根据屏幕大小分配图像的宏，但我没有找到任何示例。我愿意接受任何建议。

抱歉，帖子太长了，可能是duplicate，但提供的答案不起作用。

【问题讨论】：

标签： ios fullscreen interstitial google-dfp double-click-advertising

【解决方案1】：

我通过创建自定义广告（新广告>移动应用>自定义）找到了一个可行的解决方案。

我使用下面的代码（代码 sn-p 字段）插入图像（调整大小并在屏幕上居中）并将图像链接到点击 URL：

<div style="max-height:100%;max-width:100%; text-align: center;">
  <a href="%%CLICK_URL_UNESC%%%%DEST_URL%%">
        <img src="%%FILE:PNG2%%" style="max-height:100%;max-width:100%;vertical-align: middle;" />
    </a>
</div>

【讨论】：

【解决方案2】：

自定义广告素材是正确的方法，但示例代码应该是这样的。

<div style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #000; ">
<a href="%%CLICK_URL_UNESC%%%%DEST_URL%%" style="width: 320px; height: 480px; display: block;">
   <img src="%%FILE:PNG1%%" style="width: 320px; height: 480px; vertical-align: middle;" />
</a>

我认为 CSS Flex 选项是这种情况下水平和垂直对齐的最佳选择。

https://jsfiddle.net/9byg3t1n/

【讨论】：