javascript - 仅当窗口大于 X 时加载脚本

Question

我目前正在使用下面的脚本，但注意到它只适用于屏幕尺寸，不适用于窗口尺寸，因此调整浏览器大小不会触发它。我怎样才能让它仅在屏幕尺寸大于 X 时运行？对于 Retina 显示器，我应该考虑哪些因素？

<script>
if (screen && screen.width > 899) {
document.write('<script async type="text/javascript" src="http://example.com/myscript.js"><\/script>');
}
</script>

Answer 1

这可以通过 window.matchMedia ( docs )

<script>
  var mediaQuery = window.matchMedia('(min-width: 400px)');

  mediaQuery.addListener(loadScripts);

  function loadScripts() {
    document.write('\x3Cscript src="myScript.js">\x3C/script>');
  }    
</script>

<script src="mySecondScript.js"></script>
<script src="myThirdScript.js"></script>

这是一个 JSFiddle .