Onpage JavaScript包含不同的JavaScript广告横幅，具体取决于屏幕宽度

Question

我正在重建我的网站，使其能够在各种屏幕尺寸（包括移动设备）上做出响应。现有页面都是为大型桌面显示器制作的。因此，许多页面包括728x90广告横幅和AdLinks，一些468x60和一些336x280。当访客拥有普通电脑，笔记本电脑甚至是平板电脑时，这些都会按预期运行，但智能手机则不然。

随着Mobilegedden的推出，我正在寻找一种方法来改变广告横幅的大小，具体取决于用户屏幕的宽度。我想将350px和屏幕下的手机限制为300px宽的横幅。这样页面即可通过Google 320px移动版准备测试。我想在大屏幕显示器上为468和728像素以及728横幅之间的屏幕提供336和468个宽横幅。我的边有10px的边距，所以300px的内容占320px。

据我所知，我的简单检测脚本将放置在横幅所在的位置（这可能会成为一个包含的外部.js文件本身）。我用document.write（）测试了它们的布局。：

<script type="text/javascript">
<!--
  if (document.documentElement.clientWidth < 321) {
    document.write ('<div style="margin-left:-10px;width:320px;height:50px;border:1px solid red;text-align:center">Hello World! I am a 320px banner placeholder</div>')
    //Replace document.write with desired .js banner script code
  }

  else if (document.documentElement.clientWidth < 480){ 
    //desired .js banner script code
  }

  else if (document.documentElement.clientWidth < 730){ 
    //desired .js banner script code
  }

  else {
    //desired .js banner script code
  }  
//-->
</script>

广告代码是典型的AdSense异步JavaScript包含。

我正在寻求一个直接的JavaScript解决方案，而不是jQuery，或任何其他“库”。我可以使用SSI来包含横幅广告和html，但无论脚本条件如何，所包含的文件都会同时出现。

我已经为运行NoScript的浏览器提供了后备解决方案。这适用于其他98％和大多数智能手机用户。解决方案是复杂的编码，还是需要外部库，还是可以用直接的JS代码完成？

提前致谢。