问题
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.
回答1:
CSS3 Media Queries will selectively output images based on screen size - as long as the image is referenced in the CSS...
回答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.
回答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
回答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
来源：https://stackoverflow.com/questions/9086463/how-to-not-load-certain-elements-based-on-screen-size-with-javascript-jquery