Thanks to Amit Aggarwal, we now have an easy JavaScript which detects the screen-size (or window size) of the visitor’s browser and then serves the ads from the appropriate ad-unit which fits the visitor’s screen very well. All you need to do is to replace the Adcode (which you want to make responsive) with the following code:
JavaScript to show different ads based on Visitor’s Window/Screen Size
<script type="text/javascript">
var width = window.innerWidth || document.documentElement.clientWidth;
google_ad_client = "ca-publisher-id";
if (width >= 800) {
google_ad_slot = "ad-unit-1";
google_ad_width = 728;
google_ad_height = 60;
} else if ((width < 800) && (width < 400)) {
google_ad_slot = "ad-unit-2";
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = "ad-unit-3";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
Remember to replace the google_ad_client and google_ad_slot identifiers with the exact values from your own code or it will not display ads.
Also make sure that you have created 3 different ad-units required by the code i.e 728×60, 300×250 and a 468×60. You can modify the above code to switch between other ad-sizes of your choice. You might also be willing to create a new ad-unit for the visitors browsing on a mobile device.
Is it in violation of Adsense terms?
It is worth noting that this JavaScript does not violate any Adsense Terms and has been approved by the Adsense team and called safe for use. However, you should not make any further changes with the look and feel of ads such as hiding ads with CSS and other Black Hat tricks to generate more clicks.