Implementing mobile-only (non-responsive) ads into a responsive theme

Question

I've just finished setting up a website for someone - it's a responsive design under WordPress.

Some of the advertising on the page is responsive ad units from AdSense, but unfortunately other ad units are not responsive. The site owner has been given "mobile-only" and "desktop-only" ad code, but my question is, how does one even implement that effectively in a responsive design?

My initial thought was wrapping the code in different divs, and then hiding or showing them depending on screen width, but that's no good as the mobile ad still loads, despite being hidden, which is against some ad networks terms of use.

The only thing I can think is making a complete copy of the WordPress theme, installing it under a new name, and then using a switcher to use the "new" theme for mobile devices. Since it's a new theme, different widgets can be used, and different code added to the various needed places, but perhaps there's a cleaner solution to this?

Answer 1

As Wayne Whitty mentioned you could use something like the MobileDetect Plugin that is available for WordPress and simple to use e.g:

[phone]ADcode for Phones[/phone]
[device]ADcode for Tablets and Desktops[/device]

Or if you prefer to not use a plugin and do it in PHP then you can use WordPress's wp_is_mobile hook/call with something like so:

<?php if ( wp_is_mobile() ) {
    echo '<div class="phoneads">AD Code Here</div>';
} else {
    echo '<div class="desktopads">AD Code Here</div>';
} ?>

Answer 2

If you're OK with getting your hands dirty, you could use something like MobileDetect to detect mobile / tablet users on the server side. Then serve advertisements accordingly.