Wie setzt man bedingte WebView-Größen in einem Cordova/Phonegap-Projekt?

Question

Ich verwende ein Plugin, das ein anderes WebView (Appodeal-Banner) erstellt, das die Hauptanwendungen WebView überlappt. Theres kein guter Weg, um zu beheben, dass die Manipulation der HTML-Tags, weil Elemente Chaos

Standard Banner Einstellungen

32px: Gerät Bildschirmhöhe < = 400
50px: 400 < Gerät Bildschirmhöhe < = 720
90px = Gerät Bildschirmhöhe> 720

So muss das Webview Höhe entsprechend Appodeal Banner Höhe ändern.

Beispiel:

if (device.screen.height <= 400) { WebView.height = WebView.height - "32px" }

PS: Ich bin nicht Java-Programmierer Web-Entwickler nur

Answer 1

Ich bin nicht sicher, dass Sie Ihre Wurzel Webansicht auf Admob Banner zeigen die Größe haben (ich bin nicht einmal sicher, dass es überhaupt möglich ist). Alles, was Sie tun müssen, ist, den Inhalt Ihres Haupt-Webview neu zu gestalten, wenn das Banner angezeigt wird. Wenn ich Ihre Post richtig verstanden habe, verwenden Sie Appodeal PhoneGap Plugin, die wirklich eine weitere Webview-Komponente verwendet, um Anzeigen zu zeigen. In diesem Fall wissen Sie alles über:

1. Bannerplatzierung (oben oder unten), b/c Sie fordern explizit (Appodeal.BANNER_TOP | Appodeal.BANNER_BOTTOM);
2. Bannergröße (Sie beschrieben es selbst in Frage);
3. Eine Tatsache, dass Banner angezeigt wird (document.addEventListener('onBannerShown', function(){...}););

Also, ich würde nur eine leere Platzhalter in meiner HTML-Vorlage vorbereiten, CSS-Regeln hinzufügen, mit denen sie sich verstecken, wenn kein Appodeal Banner angezeigt, und onBannerShown Ereignis entsprechende Platzhalter angezeigt werden und all meinem webview Inhalt ändern.

<style> 
    .appodeal-top { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 0; 
    } 
    .main-content { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    } 
    .appodeal-show .appodeal-top { 
    /* replace it with appropriate value calculated on device height */ 
    height: 50px; 
    } 
    .appodeal-show .main-content { 
    /* replace it with appropriate value calculated on device height */ 
    top: 50px; 
    } 
</style> 
<script> 
    document.addEventListener('onBannerShown', function(){ 
    document.getElementById('root').className = 'appodeal-show'; 
    }); 
</script> 
<div id="root"> 
    <div class="appodeal-top"></div> 
    <div class="main-content"> 
    ... 
    </div> 
</div> 

(Ich habe diesen Code nicht versucht - es zeigt Ihnen nur eine Idee).