背景

个人也是比较反感那些不美观的广告，但是适当利用Google广告的话可以给网站添加一点内容，个人觉得还是挺好的。虽然Google Adsense 提供了自适应广告尺寸。但是有时候适配的尺寸并不是你想要的尺寸。比如本博客的下方有个横幅广告，考虑到用固定尺寸的横幅广告会导致手机端的显示太大，不美观。试过了自适应广告尺寸，效果是移动端的显示也是正方形方块广告，但是我想要的是高度比较小的横幅广告，只要一小块的长方形广告会比较美观。这篇文章记录了如何将自适应广告代码修改为不同屏幕大小显示指定尺寸。

效果

下面是本博客的评论框上方的长方形广告。根据不同屏幕宽度显示不同高度尺寸，宽度基本为根据屏幕大小自动拉伸。

电脑端显示效果

电脑端显示效果
电脑端显示效果

iPad端显示效果

iPad端显示效果
iPad端显示效果

手机端显示效果

手机端显示效果
手机端显示效果

可以看到，根据不同屏幕大小，广告尺寸会自动适配宽度和指定高度。原来的代码会导致是一块正方形广告，感觉在手机端等比较小的屏幕上占用屏幕太大，影响体验。

代码

谷歌官方修改代码

这里贴上Google官方修改后的自适应广告代码。

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
  • 宽度不超过 500 像素的屏幕：320x100 广告单元。
  • 宽度在 500 像素到 799 像素之间的屏幕：468x60 广告单元。
  • 宽度在 800 像素以上的屏幕：728x90 广告单元。

本博客修改后代码

这里附上本博客用的代码，就是Google发布的代码再根据自己的实际情况修改。

<div align="center">
<style>
.adsbygoogle-comment { width: 99%; height: 60px; padding: 1rem 0px }
@media(min-width: 500px) { .adsbygoogle-comment { width: 99%; height: 70px; padding: 1rem 0px} }
@media(min-width: 800px) { .adsbygoogle-comment { width: 99%; height: 90px; padding: 1rem 0px} }
</style> 
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- Wyane's Blog 长方形 -->

<ins class="adsbygoogle adsbygoogle-comment"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

解释

  • 宽度不超过 500 像素的屏幕：宽度为根据屏幕实际宽度自动调整为99%的宽度，高度固定为60px的广告单元 上下内边距1rem。
  • 宽度在 500 像素到 799 像素之间的屏幕：宽度为根据屏幕实际宽度自动调整为99%的宽度，高度固定为70px的广告单元 上下内边距1rem。
  • 宽度在 800 像素以上的屏幕：宽度为根据屏幕实际宽度自动调整为99%的宽度，高度固定为90px的广告单元 上下内边距1rem。
  • adsbygoogle-comment为样式名，可以自定义，需要和 <ins class="adsbygoogle adsbygoogle-comment" 对应
  • data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx"的ca-pub-xxxxxxxxxxxxxxxxxx为你自己的发布商ID
  • data-ad-slot="xxxxxxxxxx"的xxxxxxxxxx为你自己的广告单元ID
  • 以上地方根据自己需求修改。

如果还有不懂的地方可以参考下面的官方解释。 注意：Google AdSense原则上不允许修改广告代码，官方好像只允许这种通过css样式的方法来修改自适应广告尺寸。

在您的 AdSense 帐号中创建一个展示广告单元，确保“广告尺寸”部分中的自适应选项保持选中状态。记下自适应广告代码中的以下信息： 发布商 ID，例如 ca-pub-1234567891234567 广告单元 ID (data-ad-slot)，例如 1234567890。 在示例代码中： 将所有 example_responsive_1 实例都替换为唯一名称，例如 Home_Page、front_page_123 等。 注意事项： 您的唯一名称只能包含英文字母 (A-Z)、数字和下划线，且第一个字符必须是英文字母。 您每次调整此示例代码时都必须使用不同的唯一名称。 将 ca-pub-XXXXXXX11XXX9 替换为您自己的发布商 ID。 将 8XXXXX1 替换为您自己的广告单元 ID。 决定您希望广告单元在每类屏幕宽度上占据的尺寸： 如果您希望采用示例代码中现有的广告单元尺寸，则不需要做出任何额外更改。 如果您希望根据具体屏幕尺寸设置不同的广告单元尺寸，请在示例代码中进行以下操作： 将 320px 和 100px 替换为您希望为宽度不超过 500 像素的屏幕使用的广告单元的宽度和高度。 将 468px 和 60px 替换为您希望为宽度在 500 像素和 799 像素之间的屏幕使用的广告单元的宽度和高度。 将 728px 和 90px 替换为您希望为宽度超过 800 像素的屏幕使用的广告单元的宽度和高度。 复制修改后的广告代码，并将其粘贴到您希望展示广告的网页的 HTML 源代码中。 注意：放置广告代码后，我们建议您在不同的设备和屏幕上测试您的广告，确保自适应功能正常工作。 自适应广告代码高级功能示例 如果您发现我们的自适应广告代码无法满足您的所有需求，则不妨修改广告代码，通过 CSS 指定广告单元的确切尺寸。

注意：除非您对修改广告代码非常有把握，否则我们不建议您使用这些高级功能。

参考来源