Ionic 6 Capacitor 4中AdMob广告覆盖TabBar问题求助

你的问题出在横幅广告直接贴在屏幕最底部，和TabBar重叠了。要实现广告在内容下方、TabBar上方的效果，得从两个方面调整：让广告避开TabBar，同时让页面内容不被广告遮挡。

具体修改方案： #

1. 调整广告位置，避开TabBar

利用Ionic内置的TabBar高度CSS变量，给广告设置底部margin，让它自动停在TabBar上方。同时保留自适应横幅，适配不同设备。

2. 动态调整内容内边距，避免被广告遮挡

监听广告的尺寸变化事件，获取实际广告高度，给页面内容容器设置底部内边距，确保内容不会被广告盖住。

修改后的完整代码：

import { Component, OnInit, Injectable } from '@angular/core';
import { AdMob, BannerAdOptions, BannerAdPluginEvents, BannerAdPosition, BannerAdSize } from '@capacitor-community/admob';

@Component({
  selector: 'app-mypage',
  templateUrl: './mypage.page.html',
  styleUrls: ['./mypage.page.scss'],
})

@Injectable({
  providedIn: 'root'
})

export class MyPage implements OnInit {
  tottalnoofyears: number;
  bannerHeight = 0;

  constructor() { this.initialize(); }

  async initialize() {
    const { status } = await AdMob.trackingAuthorizationStatus();

    AdMob.initialize({
      requestTrackingAuthorization: true,
      initializeForTesting: true,
    });

    this.showBanner();
  }

  async showBanner() {
    // 获取Ionic TabBar的高度（用内置CSS变量，适配iOS/Android）
    const tabBarHeight = parseInt(
      getComputedStyle(document.documentElement).getPropertyValue('--ion-tab-bar-height'),
      10
    ) || 56;

    const adId = 'ca-app-pub-MYID';
    const options: BannerAdOptions = {
      adId,
      adSize: BannerAdSize.ADAPTIVE_BANNER,   
      position: BannerAdPosition.BOTTOM_CENTER,
      margin: tabBarHeight, // 让广告底部距离屏幕底部TabBar高度的距离，刚好落在TabBar上方
      isTesting: false,
    };

    await AdMob.showBanner(options);

    // 监听广告尺寸变化，动态调整内容内边距
    AdMob.addListener(BannerAdPluginEvents.SizeChanged, (info) => {
      this.bannerHeight = info.height;
    });

    // 广告隐藏时重置内边距
    AdMob.addListener(BannerAdPluginEvents.Hide, () => {
      this.bannerHeight = 0;
    });
  }

  ngOnInit() {
    const d = new Date();
    const year = d.getFullYear();
    const startyear = 2000;
    this.tottalnoofyears = year - 2000;
  }
}

模板修改（mypage.page.html）

找到包裹页面内容的<ion-content>标签，添加动态底部内边距：

<ion-content [style.padding-bottom.px]="bannerHeight">
  <!-- 你的页面原有内容 -->
</ion-content>

额外说明： #

• 自适应横幅的高度会随屏幕宽度变化，必须通过SizeChanged事件获取真实高度，固定值会导致适配问题。
• 如果你的Header也被遮挡，检查是否设置了广告的顶部margin，或者用类似方法监听顶部广告高度调整内容的paddingTop。

内容的提问来源于stack exchange，提问作者Prashant Mehta