Is there a media query type way to switch js files based on device?

Question

I'm attempting to get my mobile layout working for my site and while the media query with the different stylesheet appears to be working I can't seem to figure out if it's even possible to load a separate javascript file attached to that media query.

Clarification:

<link rel="stylesheet" type="text/css" href="desktop.css">
<link rel="stylesheet" type="text/css"
      media="only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 2.0)" href="jesusmobile.css">
<script src="jquery.js"></script>

and at the end of my html doc before the /body

<script src="my.js"></script>

Basically I want to have it so that when my site uses the "mobile.css" stylesheet I can also tell it to use a different .js file. Is this possible?

Thanks!

http://stackoverflow.com/questions/17022222/appending-script-src-script-to-head-based-on-screen-width — asharajay, Sep 12 '13 at 05:15
thanks! seems to be what i'm looking for, although I'm pretty noob to js so I'm not too sure I can get it to work.. thanks though! — shan, Sep 12 '13 at 05:18

score 0 · Answer 1 · answered Sep 12 '13 at 05:26

You can refer this link http://www.quirksmode.org/blog/archives/2010/08/combining_media.html

if (screen.width < 600) {
    // don’t download complicated script
    // use low-source images instead of full-source ones
}

or

if (document.documentElement.clientWidth < 900) {
    // scripts
}

Is there a media query type way to switch js files based on device?

1 Answers1