Question

我尝试在应用程序的启动画面（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，但提供的答案无效。

Answer 1

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

我使用下面的代码（代码片段字段）插入图像（调整大小并居中显示在屏幕上）并将图像链接到点击后到达网址：

<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

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

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

非页内广告系列广告未填满该屏幕

2 个答案: