Question

A website I am working on uses media queries in the CSS to adjust the layout based on screen size.

This website is utilizing Google Ads, to help monetize.

If I am correct there isn’t a responsive ad unit offered by Google AdSense I can use.

My idea was to create two include files (google-300×250.html and google-320×50.html) and include one or the other based on the current screen resolution.

Has anyone else tried implementing something similar? What technologies did you use to get this working?

If I beat someone to a solution I will edit my question/post to include my solution.

Thank you all in advance.

Answer 1

This will grab the HTML from the specified file and load it into a container:

$(window).on('load', function () {
    if ($(this).width() > 320) {
        $('#my-container').load('google-320x50.html');
    } else {
        $('#my-container').load('google-300x250.html');
    }
});

This is if you are using an iframe to show the external pages. All you need to do is update the source of the iframe:

$(window).on('load', function () {
    if ($(this).width() > 320) {
        $('#my-iframe').attr('src', 'google-320x50.html');
    } else {
        $('#my-iframe').attr('src', 'google-300x250.html');
    }
});

These chunks of code are using 320px as the break-point for showing one version or another. Also, if you want to support window resizes as well you can change the code to run on the window.resize event rather than the window.load event, but you should throttle it so it doesn’t run too often.

For example:

var timer   = null;
$(window).on('load', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        if ($(this).width() > 320) {
            $('#my-container').load('google-320x50.html');
        } else {
            $('#my-container').load('google-300x250.html');
        }
    }, 100);
});

This will only run once the resize event has finished (or paused for 100ms), meaning you won’t create a ton of AJAX requests in the process. You could also setup a flag so you don’t run multiple requests at once, the flag can be resolved in the callback function for the .load() method.