台北設計交流論壇

標題: 基本上對於雙欄網站來說修改最簡便 [打印本頁]

作者: admin 時間: 2017-3-12 05:55
標題: 基本上對於雙欄網站來說修改最簡便
之後，我們需要對代碼進行一些修改，修改的方法有兩種：
<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代碼裏的style="display:inline-block;width:300px;height:250px"替換為style="display:block"，並在後面增加data-ad-format="auto"這個屬性。
修改後的代碼變為：
<ins class="adsbygoogle my_adslot"
   style="display:inline-block"
   data-ad-client="ca-pub-00000"
   data-ad-slot="00000"></ins&gt,北投通馬桶;
在整段代碼前增加<style>樣式內容,清境民宿，針對不同分辨率的屏幕展示不同呎寸的廣告。
現在主要討論一下原有的舊廣告單元如何實現自適應設計。
最簡單的方法是新建一個廣告單元，在“廣告呎寸”裏選擇“自適應廣告單元”即可，如下圖所示，這個我們就不多討論。
經過這樣的修改，AdSense廣告內容就可以正常在手機上展示了。
原有的示例代碼：
上面兩種方法都可以，建議用方法1，簡單易用。
首先，如果原有的Google AdSense廣告代碼類型為“同步”,竹北汽車借款，則必須先將代碼修改為“異步”代碼，登錄Google AdSense後台，在相應的廣告單元裏，點擊“獲取代碼”，目前默認的代碼就是異步代碼。
方法1、智能調整呎寸
<ins class="adsbygoogle"
   style="display:inline-block;width:300px;height:250px"
   data-ad-client="ca-pub-00000"
   data-ad-slot="00000"></ins>
但是網站修改完成後，我們會發現原先的Google AdSense廣告單元並沒有實現自適應，瀏覽體驗並不好，實際上，只要簡單的僟步操作，就能讓Google AdSense廣告實現自適應設計。
經過這樣的修改，原有的Google AdSense廣告單元即可實現自適應網頁設計。
早先我們在《自適應網頁設計的方法》一文中說明了網站自適應的修改方法，今天我們將著重討論Google AdSense廣告的自適應設計方法。
有些用戶可能會疑慮，這種方法修改了Google Adsense的廣告代碼是否符合Google的政策，根据Google AdSense的官方網頁介紹，如上的自適應設計的代碼修改是可以接受的修改，因此與網站相適宜的廣告修改並不違反Google AdSense的政策。
方法2、高級調整呎寸
修改後的代碼變為：
所謂自適應網頁設計，就是讓同一個網頁代碼，能夠在不同設備上（從桌面電腦顯示器到智能手機或其他移動產品設備）都能有更好的瀏覽體驗，基本上對於雙欄網站來說修改最簡便，只要在HTML頭部增加viewport標簽，在CSS文件尾部增加針對不同屏幕分辨率的規則，佈侷寬度使用相對寬度，隱藏側欄，半小時就能提升網站的手機移動瀏覽體驗。
<ins class="adsbygoogle"
   style="display:block"
&nbsp,抓漏; data-ad-client="ca-pub-00000"
   data-ad-slot="00000"
   data-ad-format="auto"></ins>

歡迎光臨台北設計交流論壇 (https://digweb.com.tw/)