How to set WebView conditional sizes in a Cordova / Phonegap project?

Question

I use a plugin that creates another WebView (Appodeal banners) that overlaps the main WebView applications. Theres not a good way to fix this HTML tag manipulation as mess elements

Default banner settings

32px: device screen height <= 400
50px: 400 <device screen height <= 720 - 90px = device screen height a> 720

Thus, the webview should change the height in accordance with the height of the Appodeal banner.

Example:

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

PS: I'm not a Java web developer programmer

Answer 1

, - Admob ( , ). , , -, . , Appodeal PhoneGap Plugin, - . :

• ( ), b/c (Appodeal.BANNER_TOP | Appodeal.BANNER_BOTTOM);
• ( );
• , (document.addEventListener('onBannerShown', function(){...}););

, HTML-, CSS, , Appodeal, onBannerShown -.

<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>

( - ).