如何不使用javascript / jquery根据屏幕大小加载某些元素

Question

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 when a phone browser visits the site.

I know that display: none; isn't an option because the ad would still be loaded and record an impression. This is not an option.

Basically, I need to know how to load the ads in via javascript after the screen resolution has been found. I can find the resolution, I just don't know how to add the ads in after finding that.

I have tried .html with jquery but it seems to not allow adding script tags into the dom.

Thanks in advance.

Answer 1

CSS3 Media Queries将根据屏幕大小有选择地输出图像-只要图像在CSS被引用...

Answer 2

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

Answer 3

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

Answer 4

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.