Javascript to show ad code based on browser window size

[Amin Sabet]

I have two ads.

This one is a 728x90 Amazon ad:

<script type="text/javascript" language="javascript" src="//c.amazon-adsystem.com/aax2/getads.js"></script>
<script type="text/javascript" language="javascript">
//<![CDATA[
aax_getad_mpb({
  "slot_uuid":"123456789-123456789"
});
//]]>
</script>

And this one is a 320x50 Adsense ad:

[/FONT]
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- small_leader -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:50px"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

I want a javascript that will show the Amazon ad when the browser window is more than 728px wide and the Adsense ad when the browser window is less than or equal to 728px wide.

I know how to accomplish this using CSS with display:none, but that violates the terms of the Amazon ad network, so I'm looking for a javascript solution that won't call the ad unless it is showing.

Would appreciate any help.

Thanks,
Amin

 

[motowebmaster]

I put ads into an adserver and group the ad sizes into five zones. Then use a single media query to obtain the page width.

If the width is over 500px, I restate one zone value to make a couple banners wider. If the page is over 800px, I restate two zone values to make the banners 728x90 and the sidebar the largest ad format.