Google廣告顯示不正確的問題

響應式廣告單元

互聯網從業人員相比對於Google Adsense應該非常熟悉，它就像我們生活中常見的樓宇電梯電視廣告一樣，是互聯網上的一種廣告類型。每個網站通過安裝一塊電視，定期的向用戶播放廣告。只不過Google的這塊電視，能夠根據網站的內容、用戶的訪問行為等一系列大數據為每個用戶投放最感興趣的內容。

Google Adsense 提供了很多廣告類型、種類、主題，這樣我們就能夠根據自己網站的內容來選擇最合適的廣告進行投放。在做決定時，最重要的就是廣告的尺寸，因為合適的廣告尺寸對用戶來說更有吸引力，也能通過展示獲得更多的點擊。

對於布局尺寸固定的網站，確定一個最好的尺寸比較容易。對於一些響應式網站，如何確定最佳的廣告尺寸非常困難。因此Google提供了響應式的廣告單元。

工作原理

頁面載入後，響應式廣告單元 Responsive Ad Units 讀取父容器的尺寸（高*寬），基於此來決定廣告的最佳尺寸。這就讓我們在為網站選擇廣告時變得非常簡單，廣告的尺寸不需要再固定，它會基於父容器的尺寸而完美的適配展示廣告內容。

如果有需求要求在PC版上顯示廣告，而在行動版上隱藏廣告內容，這就會與Google Adsense的要求衝突，因為在服務條例中不允許對廣告單元使用display:none或者使用其他的HTML元素。

這時會報出以下錯誤。

Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0

這個錯誤在容器沒有可計算出的width屬性時發生，例如將元素隱藏、元素使用了絕對或者浮動布局。

最近我更換了部落格模板，在向自己的部落格添加Google Adsense時，也不小心觸發了這個錯誤。

為滿足上面的需求，Google Adsense允許通過CSS3的media queries來對廣告單元做特定的修改，具體要求如下：