Displaying a different Adsense ad based on browser width

Question

I have a responsive design I am working out that starts around 960 pixels wide and reduces down to 320px using css3 media queries.

I'm currently using a 728px banner above and below my content, but this obviously breaks once you get below 728px.

What I need is the easiest way to display a smaller ad once the browser width goes below 728px. I can't simply load the ad units in divs and hide them using css because this is against adsense TOS.

Any suggestions?

Answer 1

What about doing it with javascript. Your page can load with no ad unit html code at first but it could detect screen size with javascript and then add to the page the appropriate ad units for the initial browser size. Only a desktop type browser can resize the viewport window so maybe just forget about that issue. People resizing the browser viewport probably are playing around or whatever and will still see the first AD impression. Think about it, you open a browser and then you resize the window because of not being able to see properly and even then how many times are you going to be doing it as you navigate a site from page to page, maybe once (the first time). Google doesn't want you mucking up AD impressions so I don't think this violates TOS to load the ads based on window size. Just don't destroy the ads after resize and load others (risky). Mobile devices can't resize viewport (other then rotate) and they will always see the correct AD size.

Ryan Underdown provides a simple solution at http://ryanunderdown.com/ppc/responsive-ads-with-adsense.php

Another SO question: Making Adsense Responsive

Even Google's CSE will not show ads on your site if the initial viewport size is too small for the ads and even after you resize the window larger it won't reload ads in it until browser is refreshed.