The sample code of my first post about responsive banner ads won’t work in Internet Explorer 9 and lower versions. Internet Explorer 10 will be the first version with support of matchMedia. Also other browsers like Opera lack the support of matchMedia in older versions. See Compatibility table for support of matchMedia in desktop and mobile browsers for a complete overview.
Enquire.js is a lightweight, pure JavaScript library for responding to CSS media queries. Enquire.js won’t support browsers without support of matchMedia by default. You can fix this by using a matchMedia polyfill in combination with Modernizr.
You can use this code:
<script type="text/javascript" src="//cdn.jsdelivr.net/modernizr/2.6.2/modernizr.min.js">
</script><script type="text/javascript">//
<![CDATA[
Modernizr.load([
//first test need for polyfill
{
test: window.matchMedia,
nope: "js/matchMedia.js"
},
//and then load enquire
"js/enquire.js",
"js/responsiveads.js"
]);
// ]]>
</script>
Add you responsive ads code to “js/responsiveads.js”. By example something like:
enquire.register("screen and (max-width: 767px) and (min-width: 481px)", [
{ match : function() { $('#ads').html("![](\"banners/768.png\")
"); } }
]).listen();
This code inserts the full link to a div in stead of only the image the src attribute of the img-tag for the reason that empty src attributes show a broken image in Internet Explorer.
Can you use all this to serve responsive Google adsense ads?
In some way, you can. A word of warning: Google forbids to hide any ads or generate false impressions. Or even don’t allow you to change any code. Responsive Google AdSense shows how we can serve ads of different sizes dynamic. Based on screens sizes this methods calls the ads-server with different google_ad_slot, google_ad_height and google_ad_width variables.
You can use this method with Enquire.js too. To do this you have to change your responsive ads strategy. Your are not allowed to show different ads on screen orientation changes or other screen size changes. Reload your ads on screen size changes will generate false impressions!
You have to use enquire.mq() instead of enquire.register() to serve ads for the first screen size of the page view.
You will have to change your breakpoints to achieve this. In my first post about responsive ads and the example code there was a breakpoint at 768 pixels. Now we can’t use this breakpoint which is for example between the iPad portrait (768 x 1024) and iPad landscape (1024 x 768).
Update: Google Adsense provides responsive ad code now. The code is in beta at the moment. Example:
<style>
.twitterbootstrap-migrator { width: 320px; height: 50px; }
@media(min-width: 500px) { .twitterbootstrap-migrator { width: 468px; height: 60px; } }
@media(min-width: 800px) { .twitterbootstrap-migrator { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- twitterbootstrap migrator -->
<ins class="adsbygoogle twitterbootstrap-migrator"
style="display:inline-block"
data-ad-client="ca-pub-8350824933537409"
data-ad-slot="3252622342"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Google allows you to modify the media queries to fit your site. Basically the code create a container set the width and height of it by media queries and loads an ad which fits this dimensions.
This beta version don’t handle position changes of the ads neither it change the ads when screen width change. Screen widths can change when the orientation of the device has been changed. This won’t trigger a new page load.
Example code
On Github you will find some example code. I added a sample page (responsivetest.html) which shows the results of pure css, MediaCheck and Enquire.js. Load the page in the browser and resize your screen.
update 20 / 03 For support all the way back to IE6 and some older android versions use use David Knight’s media-match. Form more information see: enquire.js legacy support.