当屏幕宽度 > 700px 时隐藏 JavaScript？

Question

我正在使用jQuery mobile 外部资源为网站创建移动页面。现在我只需要在移动页面上使用 jQuery 移动脚本。

如何根据“媒体屏幕”值调用外部JS文件？

例如：<link type="text/css" rel="stylesheet" media="screen and (max-width:700px)" href="style.css">

我正在尝试this，但它不起作用：

<script type="text/javascript" src="./mediatypechecker.js"></script>
<script>
function installSpecialEffects()
    {
        // Exit if small screen found (palmtop etc.)
        if(parseInt(screen.width) < 640)
            return;
        if(parseInt(screen.height) < 480)
            return;

        if(IsMediaType('screen, projection, tv') > 0)
            document.write('<script type="text/javascript" src="./SOME_SPECIAL_EFFECTS.js"><\/script>');
    }
    installSpecialEffects();
</script>

你可以试试你的代码here.

Answer 1

<script type="text/javascript">

  function includeJS(incFile) {
  document.write('<script type="text/javascript" src="'
    + incFile+ '"></script>'); 
  }

  // Load SOME_SPECIAL_EFFECTS on viewports above 700px wide
  if (window.matchMedia("only screen and (min-width: 700px)").matches) {
    includeJS('SOME_SPECIAL_EFFECTS.js');

  }
</script>