原本最笨的方法, 就是透過display:none
但實在太遜而且違反google建議, 所以跳過
所以我就想自己修改javascript, 根據screen width 之類
這個網址有列出一些可用的變數, 列在下方:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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去動態變化
我的程式碼如下:
|
1 2 3 4 5 6 7 8 |
<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> |