如何使响应式 Google-adsense 广告在调整大小时缩放？答案

【问题标题】：How to make responsive Google-adsense ads scale on resize?如何使响应式 Google-adsense 广告在调整大小时缩放？
【发布时间】：2015-08-13 23:32:19
【问题描述】：

我正在使用 google adsense 响应式广告（带有 Bootstrap），它在页面加载时可以正常工作。同样在手持设备中，它可以正确检测方向并立即调整广告。

但是，当我调整浏览器的大小时，它没有反应。当没有内置系统来检测屏幕调整大小时，声称响应能力很奇怪。我曾考虑添加一个事件监听器，但这是一个很好的解决方法还是会中断？我还考虑过加载不同尺寸的广告并设置几个断点，但我想避免这种情况，只使用“响应式”广告。

提前感谢您的任何建议。

【问题讨论】：

标签： twitter-bootstrap responsive-design resize adsense onresize

【解决方案1】：

在自适应广告中，将 data-ad-format "auto" 更改为 "horizontal"

data-ad-format="horizontal"

还添加了媒体查询移动高度限制。

.adsense-mobile {
    height: 60px;
}

决赛：

<ins class="adsbygoogle adsense-mobile"
             style="display:block"
             data-ad-client="ca-pub-XXXXXX"
             data-ad-slot="XXXXXX"
             data-ad-format="horizontal"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>

【讨论】：

这并不能解决问题。首先，我不一定要限制手机高度，也不一定要限制广告格式。问题是广告在页面重新加载时保持固定大小，并且经常破坏布局，溢出到文本中，这既看起来不专业，又违反了 adsense 政策。

【解决方案2】：

将 Google Adsense 自适应广告单元与异步结合使用。它适用于所有网站大小，它会在您的网站加载完成后加载。

因此，您需要先为所有设备编写响应式 CSS，而且 Google Adsense 会延迟加载，它不会使您的网站破坏响应式设计。 在这种情况下调整屏幕大小不合适，因为您的网站已加载完毕。

【讨论】：

我觉得我说得不够清楚。我的广告是响应式广告单元，它们异步加载，但是当我调整浏览器大小时，它们根本没有反应。它们只是保持与第一次加载时相同的大小。即使在创建媒体查询或设置内联 CSS 时。添加有自己的style 标签，不会违反我的规则。
是的，没错，因为当您重新调整浏览器大小时，Google Ads 不会重新调整大小。但是，重要的是你真的要重新调整它的大小吗？因为当您加载网站时，广告会显示适合此设备的尺寸，因此，您只需让您的网站对所有设备都具有响应性，然后添加 GA 代码，它会在所有尺寸下显示。
人们偶尔会调整浏览器的大小。调整浏览器大小时，希望布局不会损坏或看起来非常不专业是合理的。此外，如果广告单元溢出来阻止网站内容（一个常见问题），这违反了 adsense 政策……更不用说惹恼用户并使您看起来不称职。

【解决方案3】：

首先，使用百分比或 px 指定您希望广告适合的 div 的高度和宽度（百分比很容易缩放）。

然后，使用 CSS 创建媒体查询，以根据屏幕查看的高度和宽度改变广告 div 的高度和宽度。

接下来，将 .adDiv iframe { max-width:100% !important; max- height:100% !important;} 之类的内容添加到您的 CSS 中。这告诉浏览器将广告（假设它是一个 iframe）呈现到 div 的全尺寸，并且!important 会覆盖广告或任何插件设置的任何 CSS。

希望这有帮助！

【讨论】：

感谢您的回答，但它不起作用。我已经尝试过!important，但它似乎没有覆盖任何东西。此外，广告获得了自己的异步样式标签，因此我的容器 div 已经加载。我似乎无法改变广告本身设置的样式。