I'm working on a Django project where I need to display different ads for mobile and desktop users. Currently, both mobile and desktop ad JavaScript is being loaded, which causes conflicts as the mobile ad scripts interfere with the desktop ads. Here's a simplified version of my template code:

<div class="ads-mobile">
    <script async type="application/javascript" src=".js"></script> 
 <ins class="ee31" data-zoneid="68"  data-=""></ins> 
 <script>(Ads = window.Ads || []).push({"goserve": {}});</script>
</div>

<div class="ads-desktop">
    <script async type="application/javascript" src=".js"></script> 
 <ins class="ee31" data-zoneid="68"  data-=""></ins> 
 <script>(Ads = window.Ads || []).push({"goserve": {}});</script>
</div>

I'm using Cloudflare, which caches the pages, so I can't rely on server-side logic (like middleware) to determine which ads to display, as the result would be cached.

I attempted to use JavaScript and/or css to detect the device type and hide/show or remove the ad blocks accordingly, but both ad scripts are still being loaded, causing issues.

How can I ensure that only the relevant ad scripts are loaded based on the user's device type, considering that the page is cached by Cloudflare? Is there a client-side approach or best practice for handling this kind of situation in Django?