插页式 DFP 广告未填满屏幕

Question

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

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

我尝试创建一个 HTML5 广告来调整图像大小以适应屏幕，但它仍然是 320x480:

这里是HTML5的代码：

<!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>

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

很抱歉 post，这可能是 duplicate 但提供的答案无效。

Answer 1

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

我使用下面的代码（代码片段字段）插入图像（调整大小并居中到屏幕）并将图像 link 点击 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>

Answer 2

Custom Creative 是正确的方法，但示例代码应该完全像这样。

<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/

插页式 DFP 广告未填满屏幕

Interstitial DFP ad doesn't fill the screen

fullscreen

interstitial

ios

google-dfp

double-click-advertising