Responsive Adsense ad resizing with screen orienta

问题:

On my website I am using Bootstrap 3.2 for responsive design and I am trying to embed Adsense responsive adds there. I am having problems with orientation changes: I would expect that adds would resize on such event, but it doesn't happen. Is such feature ready for Adsense? Some old post on Adsense blog says:

The new ad code is responsive on initial page load only. Subsequent changes to the ad size, such as a screen orientation change, will not cause a new ad to be displayed. We know that this is an important feature for many of you and we’re currently working to address this.

But current documentation doesn't mention such issue. Does this resizing work?

回答1:

So it turns out the blog post I was quoting is about advanced mode (mode which allows specifying exact ad size via CSS). Even though more than a year ago Google recognized the problem, the advanced ads are not resizing automatically when screen orientation chages.

The AdSense documentation states that responsive ads resize with orientation changes. That's true, but only for default (not advanced ads).

The advanced mode allows specifying exact ad sizes with @media CSS rules which is nice. But for me it was possible to achieve almost same thing by wrapping default responsive ads with div container. The container's size can also be specified by CSS @media rules, so I have same result as with advanced ads + I get benefit of ads resizing when screen orientation changes.

回答2:

I'm mainly shooting here, cause it's not a lot of information here to be fair, but:

What happens if you add style="display:block;" and also data-format="auto" to your ads?

If this is not going to help, I guess media queries are your friend in this matter.

回答3:

Ads from AdSense, even responsive ones, are loaded based on your screen size and orientation one time - when the webpage is loaded. Of course, you can try to reload part of page where your ad is served, but then you will have a problems with inner iframe elements (AdSense don't like to be in iframes).

回答4:

Try using this - https://github.com/mattnish/rad

I just used it in one of my projects and even though it says "outdated" it works perfectly.

The problem with adsense "responsive ads" is that it is responsive only on initial load.

回答5:

Here is my take on this one. I used advanced mode with a responsive ad unit and put in the following media queries.

<style>
.myclass-responsive { width: 320px; height: 100px; }
@media (min-width: 768px) and (min-height: 768px)  { .myclass-responsive { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- myclass-responsive -->
<ins class="adsbygoogle myclass-responsive"
    style="display:inline-block"
    data-ad-client="XXXX"
    data-ad-slot="YYYY"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

The point being that the ads in advanced mode are loaded based on the device viewport dimension but do NOT resize dynamically. The default smart resizing mode produced mixed results with my layout and would occasionally break it on dynamic resize. Using (min-width: 768px) and (min-height: 768px) in a Bootstrap layout with a responsive ad unit in advanced mode seems to fix any resizing issue I had (well on the 5 devices I tested at least). However you may get undersized ads for some devices but that the story about it ... you can't get it all.