Javascript和响应式设计

我为我的响应站点准备了这段javascript（见下文）

简而言之，当屏幕大小小于480（手机）时，我不希望它显示（也就是说我不希望这个javascript执行）。我该怎么做？我尝试对它所在的div使用display:none，但是脚本仍然执行，Hello栏仍然显示。有什么想法吗？谢谢

<script type="text/javascript" src="//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js"></script>

以下是网站：

下面是HTML（靠近底部）：

---

测量屏幕宽度，如果hellobar脚本的宽度大于480，则仅附加该脚本：

替换：

<script type="text/javascript" src="//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js"></script>

与：

var swidth=（window.innerWidth>0）？window.innerWidth:screen.width；
如果（swidth>480）{
var s=document.createElement（“脚本”）；
s、 type=“text/javascript”；
s、 src=“//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js”；
document.getElementsByTagName（'head'）[0]。appendChild；
}

---

我可以想到两种解决方案：

通过先检查屏幕宽度，然后根据需要以异步方式加载文件，动态加载脚本

以基于屏幕/文档宽度的条件包装脚本文件的内容（无论如何都会加载该文件，但如果屏幕低于480，则不会运行任何内容）

第一种方法更好，而第二种方法可以解决当页面加载时代码立即可用的问题

以异步方式加载脚本的示例如下：

<script>
  function loadScript(url){
     var js, fjs = document.getElementsByTagName('script')[0];
     js = document.createElement('script');
     js.src = url;
     fjs.parentNode.insertBefore(js, fjs);
   };

   if(window.innerWidth>480){ //here you should check for the width (this check is not necessarily cross browser)
       loadScript("//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js");
   }
</script>

函数加载脚本（url）{
var js，fjs=document.getElementsByTagName（'script'）[0]；
js=document.createElement（'script'）；
js.src=url；
fjs.parentNode.insertBefore（js，fjs）；
};
如果（window.innerWidth>480）{//这里您应该检查宽度（此检查不一定是跨浏览器的）
loadScript（“//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js”）；
}

代码不足。如何显示：无，何时包含并执行该代码？抱歉，不清楚。这段javascript放在页面底部附近。这是一个通知栏。您好，我试过上面的代码。但是，它现在根本不加载（甚至在桌面上）。知道为什么吗？对我有用。我看到它在jsFiddle中工作。我是否需要将上述代码放在javascript标记中？（请原谅我的无知）。是的（尽管JSFIDLE中不需要）。我会像变戏法一样更新我的答案！非常感谢。非常令人印象深刻。我想弄清楚这件事已经有一段时间了。再次感谢你。也许我做得不对。我将其剪切并粘贴到div标签中，如上图所示。现在它不会显示在桌面站点上。不知道我做错了什么，哪个部门？我猜你的意思是

script

tag-请检查控制台是否有错误并粘贴它们here@user3117275我发现了问题。。。您应该尝试编辑的代码。。很抱歉

<script type="text/javascript">
    var swidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if (swidth > 480) {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js";
        document.getElementsByTagName('head')[0].appendChild(s);
    }
</script>

<script>
  function loadScript(url){
     var js, fjs = document.getElementsByTagName('script')[0];
     js = document.createElement('script');
     js.src = url;
     fjs.parentNode.insertBefore(js, fjs);
   };

   if(window.innerWidth>480){ //here you should check for the width (this check is not necessarily cross browser)
       loadScript("//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js");
   }
</script>