根据屏幕宽度，在页面JavaScript中包含不同的JavaScript广告横幅

我正在重建我的网站，使它们能够在各种屏幕大小（包括手机屏幕）上做出响应。现有页面都是为大型桌面显示器制作的。因此，许多页面包括728x90广告横幅和广告链接，一些是468x60，一些是336x280。当访客有一台普通电脑、笔记本电脑、甚至平板电脑，但在智能手机上却不是这样时，这些都会像预期的那样发挥作用

有了Mobilegedden，我正在寻找一种根据用户屏幕的宽度改变广告横幅大小的方法。我想把350px和低于300px屏幕的手机限制在300px宽的横幅上。因此，该页面通过了谷歌320px移动就绪测试。我想提供336和468宽横幅屏幕之间的468和728像素和728大屏幕上的横幅。我有一个10像素的边距，所以300像素的内容占据了320像素

这是我的简单检测脚本的最新进展，它将被放置在横幅所在的位置（这可能会成为一个包含的外部.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代码来完成

---

提前感谢。

您的代码看起来是一个良好的开端，您不应该需要jQuery或其他库来完成您想要的功能。那么你的问题是什么？我的问题是我还不知道如何从这个屏幕大小的脚本中调用我的广告代码，它包含在一个“scripts”目录中的.js文件中。我的广告脚本只是G Adsense代码，包装在document.write行中。脚本文件（.js）通常通过通常的inpage表单包含在我的页面中：在这里查看此答案，它可能会帮助您找到正确的路径。谢谢，收音机。我会把这个话题通读一遍，并试着解释清楚。