How to Handle AdSense in Responsive Designs

Responsiveness is clearly the future of web design, but one little problem with is advertisements. Ad networks, Google AdSense includes, don’t take kindly to you simply hiding them at lower resolutions with display: none and calling it a day, since the ads still load and register as being displayed. You need to do something smarter.

Fortunately, you can get the viewport width just as easily in JavaScript as with CSS, and can display a different ad unit depending on the page width. This can only happen on page load, though, to comply with the AdSense terms of service. Otherwise you would be breaking the rules by scripting fake page loads, essentially.

You can see how to do it in the Labnol post How to Use Google AdSense Ads on your Responsive Website.