当屏幕宽度> 700像素时隐藏JavaScript吗？

Question

I'm creating a mobile page for a website using jQuery mobile external resources. Now I need to use jQuery mobile script only on mobile pages.

How to call external JS file based on “media screen” value?

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

I'm trying this but it is not working:

<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>

You can try your code 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>