如何使用媒体查询从 HTML 加载 javascript 文件

Question

是否有可能（如果可以的话）让媒体查询根据浏览器大小从 HTML 加载不同的 javascript 文件？

类似的东西？

<script media="screen and (max-width: 900px)" src="/js/menu_home.js"  type="text/javascript"></script>

或者我在互联网上找到的类似的东西，但它没有加载任何一个文件

<script>
function require(path) {
  try{
    document.write('<script type="text/javascript" src="'+path+'"><\/script>');
  } catch(e) {
    var script = document.createElement('script');
    script.src = path;
    document.getElementsByTagName('head')[0].appendChild(script);
  }
}
if (isMedia("screen and (max-width:900px)"){
  require('/js/menu_home.js');
}
else {
  require('/js/menu_photo.js');
}
</script>

在我的网站http://www.kujawadesigns.com/web/where_art_thou/ 上，我将其设置为加载不同的脚本文件，以允许手风琴菜单在正确的类别中展开。但是，我希望始终从移动版本中删除 expandfirst 类。如果你们建议我使用其他流程，请告诉我。

提前致谢！

Answer 1

使用 ma​​tchmedia，您可以仅在满足特定媒体查询条件时执行 JavaScript 块

<script>
    if (window.matchMedia('screen and (min-width: 600px)')){
      var head = document.getElementsByTagName("head")[0];
      s = document.createElement('script');
      s.setAttribute('type','text/javascript');
      s.setAttribute('src',jsname);
      head.insertBefore(s, head.firstChild);


    }
</script>

参考：http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

注意： 对于较旧/不受支持的网络浏览器，您可以尝试 matchMedia() polyfill，尽管它不支持 addListener。