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: 
1st - I did AB test of 728 leaderboard vs 336 large rectangle. 336 performed over 75% better, over 300,000 page views. 

Point is - don't use 728, and also don't recommend using responsive ad unit at all.

My other test improved earning by over 100% by switching from responsive ad unit to 2 fixed size rectangles (one for mobile, one for desktop/tablet).

You can use something like this to determine user agent:

```
$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");

```

Then based on user agent you can show either "mobile" or "desktop" ad size. 

Here is how to use USER\_AGENT to select which ad to show: <http://www.adsenseninja.com/show-mobile-optimized-adsense-ads-for-smartphone-visitors-automatically-free-mobile-ads-php-script-for-wordpress/>
It is possible via hidden div and media libraries but I think It's forbidden by google :(