turn off javascript using css?

The best solution would be to ONLY load scripts NEEDED for the mobile version. As many device have a data-cap, you don't want the user to be loading scripts that they don't need. So, you would detect their browser via PHP, or JavaScript, and then load the required files for their platform.

Why not use a script that also detects the same specs your media queries does? that way you can selectively activate scripts.

One such script exists in the 1140 CSS Grid framework to support media queries on older browsers. You can check it out and see how you can tap into it.

Here's an article that explains how to check the screen width and height to emulate media query screen detection.

By the way. CSS is for styling, nothing more.

I'm assuming that you mean that there are elements on the page with scripts embedded within them. The first thing you need to do is get rid of embedded scripts such as onclick attributes on elements. These scripts need to be moved into their own external JS files. Once this is done, you can only include the JS files for the mobile version of the site.

Two options:

You can have a script that loads all the other scripts when in desktop, this is a good option if you're using only non-intrusive Javascript (e.g jquery).

Another option is not to generate those scripts in the first place in the server side.

Media queries are probably the best solution for providing alternative styles for mobile users. Unfortunately there is no media attribute for the <script> element to proceed similarly in the case of page logic.

You can, however, provide a script loader which will load desired .js file depending on the style sheet selected by the browser on the basis of your media query. I don't know how to do this in a direct, elegant way but there is a nice hack for that. You have to "mark" each .css with a unique declaration (dummy, unimportant or different by design) and check it from within JS after the page has loaded to determine which style sheet has been applied by the browser.

The CSS could look like this:

@media handheld, screen and (max-width:1023px) {
    body {margin-top: 1px}
}
@media screen and (min-width:1024px) {
    body {margin-top: 0px}
}
/* These would be separate .css files in a real example */

And the accompanying JS as follows:

window.setTimeout('wait()', 10);
function wait() {
    if (!document.body)
        window.setTimeout('wait()', 100)
    else
       onLoad();
}

function onLoad() {
    var load = document.createElement('script');
    var head = document.getElementsByTagName('head')[0];
    var body = document.getElementsByTagName('body')[0];
    var mark = window.getComputedStyle(body).getPropertyValue('margin-top');
    switch (mark) {
        case '0px':
            load.setAttribute('src', 'handheld.js');
            break;
        case '1px':
            load.setAttribute('src', 'screen.js');
            break;
        default:
            load.setAttribute('src', 'somethingelse.js');
    }
    head.appendChild(load);
}