AdMob issues in Hybrid iOS

[Greg Galipeau]

I have a Hybrid Application with the Cordova AdMob plugin. This plugin basically puts a banner at the top of my app (above the view/html). When I deploy to Android it works perfect. But, when I deploy to iOS the footer of my app is pushed down under the viewable area of my screen. I did some math and it is getting pushed down the exact height of the Admob banner. Seems like the html/javascript Telerik generates for the height doesn't take into account html above the view and thus pushes everything down. Very weird it works in Android and not iOS though.

Any suggestions?

 

[Jim]

Are you using the default UIWebview? I've found that using the WKWebview changes the app view sizing behaviour a bit when displaying ads (Change in Properties --> iOS). I encountered something similar with a banner at the bottom pushing the header up into the statusbar. I fixed it with a bit of a kludge:

         

if (AdMob) {
        AdMob.createBanner({
            adId: app.util.getAdMobKeys().banner,
            success: function () {
                //need to add extra padding for iOS 7+ status bar if banner is present
                //in order to keep the header and status bar from overlapping
                if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
                    document.body.style.marginTop = "20px";
                }
            },
            error: function () {
                if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
                    document.body.style.marginTop = "0px";
                }
            }
        });
    }

 

[Greg Galipeau]

Yes, I am using UIWebView.

 

i found a workaround. I put a div in my header. Then I used overlap true for the banner. Then I used some media queries in CSS to change the height of the div (because AdMobs Smart Banner has 3 responsive heights). Little hackish, but will still work if iOS ever fixes this issue.