早先我們在《自適應網頁設計的方法》一文中說明了網站自適應的修改方法，今天我們將著重討論Google AdSense廣告的自適應設計方法。

所謂自適應網頁設計，就是讓同一個網頁代碼，能夠在不同設備上（從桌面電腦顯示器到智能手機或其他移動產品設備）都能有更好的瀏覽體驗，基本上對于雙欄網站來說修改最簡便，只要在HTML頭部增加viewport標簽，在CSS文件尾部增加針對不同屏幕分辨率的規則，布局寬度使用相對寬度，隱藏側欄，半小時就能提升網站的手機移動瀏覽體驗。

但是網站修改完成后，我們會發現原先的Google AdSense廣告單元并沒有實現自適應，瀏覽體驗并不好，實際上，只要簡單的幾步操作，就能讓Google AdSense廣告實現自適應設計。

最簡單的方法是新建一個廣告單元，在“廣告尺寸”里選擇“自適應廣告單元”即可，如下圖所示，這個我們就不多討論。

現在主要討論一下原有的舊廣告單元如何實現自適應設計。

首先，如果原有的Google AdSense廣告代碼類型為“同步”，則必須先將代碼修改為“異步”代碼，登錄Google AdSense后臺，在相應的廣告單元里，點擊“獲取代碼”，目前默認的代碼就是異步代碼。

之后，我們需要對代碼進行一些修改，修改的方法有兩種：

原有的示例代碼：

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-00000"
     data-ad-slot="00000"></ins>

方法1、智能調整尺寸

將中間一行ins代碼里的style="display:inline-block;width:300px;height:250px"替換為style="display:block"，并在后面增加data-ad-format="auto"這個屬性。

修改后的代碼變為：

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-00000"
     data-ad-slot="00000"
     data-ad-format="auto"></ins>

方法2、高級調整尺寸

在整段代碼前增加<style>樣式內容，針對不同分辨率的屏幕展示不同尺寸的廣告。

修改后的代碼變為：

<style>
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>

<ins class="adsbygoogle my_adslot"
     style="display:inline-block"
     data-ad-client="ca-pub-00000"
     data-ad-slot="00000"></ins>

上面兩種方法都可以，建議用方法1，簡單易用。

經過這樣的修改，原有的Google AdSense廣告單元即可實現自適應網頁設計。

有些用戶可能會疑慮，這種方法修改了Google Adsense的廣告代碼是否符合Google的政策，根據Google AdSense的官方網頁介紹，如上的自適應設計的代碼修改是可以接受的修改，因此與網站相適宜的廣告修改并不違反Google AdSense的政策。

經過這樣的修改，最終網站在手機上的展示形式如下圖所示，AdSense廣告內容也可以正常在手機上展示了。