How to include external javascript on mobile devices

Question

I have a javascript ad code that I only want to show on lets say devices 600px and smaller. For bigger screens I have an iframe ad. I've read so much and can't find a similar example.

Here's the javascript I need for smaller screens

<script type="text/javascript">
ad_idzone = "39483984";
ad_width = "300";
ad_height = "100";
</script>
<script type="text/javascript" src="https://ads.exoclick.com/ads.js"></script>
<noscript><a href="http://main.exoclick.com/img-click.php?idzone=39483984" target="_blank"><img src="https://syndication.exoclick.com/ads-iframe-display.php?idzone=39483984&output=img&type=300x100" width="300" height="100"></a></noscript>

I've read about all types of ways like this but it's not going to work obviously and I'm not very experienced. Any suggestions?

<script type="text/javascript">

if (screen.width<500){ 
//if screen width less than 500px it's probably a mobile device 
// so do this code... 

}
else{
// screen wider than 500 pixels 
// then do this code
} 
</script>

Answer 1

You can try to append the javascript file for your ad on smaller screens using javascript.

<script>
 if (screen.width < 500) {

   var myScript = document.createElement('script');
   myScript.setAttribute('type', 'text/javascript');
   myScript.setAttribute('src', 'https://ads.exoclick.com/ads.js');

   document.getElementsByTagName('head').item(0).appendChild(myScript);
 } else {
   showMyIframeAd();
 }
</script>