早先我們在《自適應(yīng)網(wǎng)頁設(shè)計的方法》一文中說明了網(wǎng)站自適應(yīng)的修改方法，今天我們將著重討論Google AdSense廣告的自適應(yīng)設(shè)計方法。
所謂自適應(yīng)網(wǎng)頁設(shè)計，就是讓同一個網(wǎng)頁代碼，能夠在不同設(shè)備上（從桌面電腦顯示器到智能手機或其他移動產(chǎn)品設(shè)備）都能有更好的瀏覽體驗，基本上對于雙欄網(wǎng)站來說修改最簡便，只要在HTML頭部增加viewport標簽，在CSS文件尾部增加針對不同屏幕分辨率的規(guī)則，布局寬度使用相對寬度，隱藏側(cè)欄，半小時就能提升網(wǎng)站的手機移動瀏覽體驗。
但是網(wǎng)站修改完成后，我們會發(fā)現(xiàn)原先的Google AdSense廣告單元并沒有實現(xiàn)自適應(yīng)，瀏覽體驗并不好，實際上，只要簡單的幾步操作，就能讓Google AdSense廣告實現(xiàn)自適應(yīng)設(shè)計。
最簡單的方法是新建一個廣告單元，在“廣告尺寸”里選擇“自適應(yīng)廣告單元”即可，如下圖所示，這個我們就不多討論。
現(xiàn)在主要討論一下原有的舊廣告單元如何實現(xiàn)自適應(yīng)設(shè)計。
首先，如果原有的Google AdSense廣告代碼類型為“同步”，則必須先將代碼修改為“異步”代碼，登錄Google AdSense后臺，在相應(yīng)的廣告單元里，點擊“獲取代碼”，目前默認的代碼就是異步代碼。
之后，我們需要對代碼進行一些修改，修改的方法有兩種：
原有的示例代碼：
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-00000"
data-ad-slot="00000"></ins>
方法1、智能調(diào)整尺寸
將中間一行ins代碼里的style="display:inline-block;width:300px;height:250px"替換為style="display:block"，并在后面增加data-ad-format="auto"這個屬性。
修改后的代碼變?yōu)椋?/p>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-00000"
data-ad-slot="00000"
data-ad-format="auto"></ins>
方法2、高級調(diào)整尺寸
在整段代碼前增加<style>樣式內(nèi)容，針對不同分辨率的屏幕展示不同尺寸的廣告。
修改后的代碼變?yōu)椋?/p>
<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，簡單易用。
經(jīng)過這樣的修改，原有的Google AdSense廣告單元即可實現(xiàn)自適應(yīng)網(wǎng)頁設(shè)計。
有些用戶可能會疑慮，這種方法修改了Google Adsense的廣告代碼是否符合Google的政策，根據(jù)Google AdSense的官方網(wǎng)頁介紹，如上的自適應(yīng)設(shè)計的代碼修改是可以接受的修改，因此與網(wǎng)站相適宜的廣告修改并不違反Google AdSense的政策。
經(jīng)過這樣的修改，最終網(wǎng)站在手機上的展示形式如下圖所示，AdSense廣告內(nèi)容也可以正常在手機上展示了。