Ion-footer在移动端谷歌浏览器唤起键盘时显示在键盘上方问题求助

问题原因 #

Android端Chrome浏览器唤起软键盘时，会主动压缩页面可视视口高度，而ion-footer默认采用fixed定位附着在视口底部，因此会被软键盘顶到键盘上方区域。

解决方案 #

以下方案按实现复杂度从低到高排序，可按需选择： #

方案1：当前登录页临时适配（最适配你当前的场景）

你的页面只有邮箱、密码两个输入会触发键盘唤起，直接监听输入框的聚焦失焦状态控制footer显隐即可：

1. 组件ts文件中新增控制变量

// 组件类内声明变量
hideFooter = false;

2. 给两个ion-input绑定聚焦失焦事件

<ion-input type="email" email formControlName="Username" (ionFocus)="hideFooter = true" (ionBlur)="hideFooter = false"></ion-input>
<ion-input type="password" formControlName="Password" (ionFocus)="hideFooter = true" (ionBlur)="hideFooter = false"></ion-input>

3. 给ion-footer添加显隐控制

<ion-footer *ngIf="!hideFooter" class="ion-no-border" style="display: grid; place-content: center;">
  <!-- 原有footer内容 -->
</ion-footer>

方案2：全局修改Ionic键盘适配逻辑

如果你需要全站生效，修改Ionic全局配置即可：
找到项目中IonicModule.forRoot()的配置位置，添加keyboardResize参数：

// 一般在app.module.ts中
IonicModule.forRoot({
  keyboardResize: 'none',
  // 其他原有配置保留
})

该配置会禁用Ionic默认的键盘挤压视口逻辑，软键盘唤起时会直接覆盖在页面上方，footer会保留在原页面底部被键盘遮挡，不会上浮。 #

方案3：纯CSS全局适配

如果不想修改框架配置，添加全局CSS即可：

/* 全局样式文件中添加 */
ion-footer {
  position: absolute !important;
}

该写法会让footer固定在整个页面文档流的底部，而非跟随可视视口底部移动，键盘唤起压缩视口时不会影响footer的位置。

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