How To Not Load Certain Elements Based On Screen Size With Javascript/jquery

I am making a site using responsive web design (via media queries). I want to have different ads for different screen sizes. For example, I don't want a 780by90 ad to be displayed

Solution 1:

CSS3 Media Queries will selectively output images based on screen size - as long as the image is referenced in the CSS...

Solution 2:

I'd recommend doing this kind of calculation on the back-end instead of the front-end. You can use libraries such as WURFL or something like Apache Mobile Filter.

Solution 3:

If you're using DFP, they have responsive ad functionality built into the googletag object:

https://support.google.com/dfp_premium/answer/3423562?hl=en&ref_topic=4390040

you define ad sizes based on the viewable content area of the browser

Solution 4:

If you're using Google DFP Andyl mentioned their method for responsively displaying ads, which is definitely a good place to start. To this I'd add that you need to define size mappings for every slot on the page (even if they're not all responsive) otherwise nothing works properly for some reason.

Also, if you want to hide ad units when the browser is smaller than a given width/height, that Google article suggests not defining a mapping for browser size [0, 0]. However, I found when I did this it actually displayed my largest creative for some reason. I managed to suppress ads by creating a minimum size mapping that referred to a non-existent creative size, eg.

.addSize([0, 0], [1, 1])

You can also apply this to any browser size, not just the smallest. I did write a short post about this, although it doesn't have much more information than I've provided here.

Hope this helps,

Toby