根據視窗寬度,動態調整google adsense廣告大小

原本最笨的方法, 就是透過display:none
但實在太遜而且違反google建議, 所以跳過

所以我就想自己修改javascript, 根據screen width 之類
這個網址有列出一些可用的變數, 列在下方:

function GetWidth()
  {
          var x = 0;
          if (self.innerHeight)
          {
                  x = self.innerWidth;
          }
          else if (document.documentElement && document.documentElement.clientHeight)
          {
                  x = document.documentElement.clientWidth;
          }
          else if (document.body)
          {
                  x = document.body.clientWidth;
          }
          return x;
  }

  function GetHeight()
  {
          var y = 0;
          if (self.innerHeight)
          {
                  y = self.innerHeight;
          }
          else if (document.documentElement && document.documentElement.clientHeight)
          {
                  y = document.documentElement.clientHeight;
          }
          else if (document.body)
          {
                  y = document.body.clientHeight;
          }
          return y;
  }

但改了改都不優, 隨興看看google說明,
原來其實google已經寫了基本範例, 可以參考
https://support.google.com/adsense/answer/1354736?hl=zh-Hant

我一開始誤會了, 以為一個ID只能出現一個大小
實際上是一個ID可以根據你餵給它的width與height去動態變化
我的程式碼如下:

<style type="text/css">
.adslot_1 { width: 234px; height: 60px; }  /* 半橫幅*/
@media (min-width:768px) { .adslot_1 { width: 468px; height: 60px; } } /* 中橫幅*/
@media (min-width:960px) { .adslot_1 { width: 728px; height: 90px; } } /* 大橫幅*/
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1" style="display:inline-block;" data-ad-client="YOUR_AD_CLIENT_ID" data-ad-slot="YOUR_AD_SLOT_ID"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

發表迴響