根據一項調查顯示,使用手持式裝置上網的人已經超越電腦,為了因應這個趨勢,Google於2015年五月宣布將響應式網頁設計(★註一)納入搜尋引擎排名的加分條件。而Wordpress是目前最受歡迎的CMS架站系統,當然也有越來越多的模板支援響應式設計。
若是網站上掛著Google Adsense廣告的人,當然會希望廣告尺寸也能支援響應式設計。於是Adsense也新增了回應式廣告的選項,但有的時候Adesnse自己隨機切換的廣告尺寸並不是那麼讓人滿意,有沒有辦法可以強制設定成特定解析度就採用特定尺寸?
可以的,利用Javascript的語法就能達成:
(提醒一下,如果你是直接複製以下文章裡的程式碼,單引號和雙引號可能會變成全型字;因為程式碼不支援全型,所以建議單引號和雙引號要用半型手動重新輸入)
<script type=”text/javascript”>
google_ad_client = “發佈商ID(記得前面要加ca)”;
if (window.innerWidth >= 800) {
google_ad_slot = “廣告單元1”;
google_ad_width = 728;
google_ad_height = 90;
} else if (window.innerWidth < 400) {
google_ad_slot = “廣告單元2”;
google_ad_width = 320;
google_ad_height = 100;
} else {
google_ad_slot = “廣告單元3″;
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type=”text/javascript” src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
以上語法的意思是:
400 像素以下:顯示 320 x 100 尺寸
400 到 800 像素之間:顯示 468 x 60 尺寸
800 像素以上:顯示 728 x 90 尺寸
★註一:響應式網頁設計(Responsive Web Design),又稱為自適應網頁設計或回應式網頁設計,是一種因應移動式裝置(如平板、手機)日益普及所產生出來的網頁開發技術。這種設計可以讓網頁的內容隨著不同的裝置的寬度來調整畫面的呈現,讓使用者可以不需要透過縮放的方式來瀏覽網頁,大大的提昇畫面的可瀏覽性及使用介面的親和度。