How to load a .js-file depending on screen size?

Question

How can we load a specific Javascript-file using the media queries from the WordPress themefolder (wp-content/themename/js/file.js)

Whe would only like to load grid.js when using a tablet or a desktop browser.

Answer 1

You should load your grid.js asynchronous:

 function is_touch_device() { return !!('ontouchstart' in window); } function loadGridJs() { var scriptTag = document.createElement('script'); scriptTag.src = "//wp-content/themename/js/grid.js"; scriptTag.type = 'text/javascript'; scriptTag.async = true; var headTag = document.getElementsByTagName('head')[0]; headTag.appendChild(scriptTag); } if (is_touch_device()) { loadGridJs(); } 

See:

Javascript asynchron nachladen , Touchgeräte erkennen