Ionic iOS端键盘唤起时内容上移问题解决咨询

开发者阿泽

2026-8-24

iOS下Ionic登录页面被键盘上推的解决办法

针对你遇到的iOS设备上点击输入框页面被键盘上推的问题，结合当前代码，可通过以下步骤解决：

1. 配置Capacitor键盘行为

在项目根目录的capacitor.config.json中修改Keyboard插件配置，禁用键盘对页面的尺寸调整：

{
  "plugins": {
    "Keyboard": {
      "resize": "none",
      "style": "dark"
    }
  }
}

resize: "none"会阻止键盘弹出时改变WebView尺寸，从根源上避免页面上移。

2. 修正ion-content属性

移除ion-content上的slot="fixed"属性，[fullscreen]="true"已能让内容区域占满屏幕，两者共存会导致布局冲突：

<ion-content class="background" [fullscreen]="true">
  <!-- 原有内容 -->
</ion-content>

3. 调整底部按钮布局

将ion-footer替换为固定定位容器，避免键盘弹出时按钮被顶起：

修改后的HTML：

<ion-content class="background" [fullscreen]="true">
  <h1 class="login-title-text">ign you in</h1>
  <p class="login-subtitle-text">Welcome back!</p>

  <div class="inputs">
    <ion-input class="item-input" type="email" placeholder="Email"></ion-input>
    <ion-input class="item-input" type="password" placeholder="Password"></ion-input>
  </div>

  <div class="footer-container">
    <ion-button color="dark" expand="block">Login</ion-button>
    <ion-button color="dark" expand="block">Forgot Password</ion-button>
    <ion-button color="dark" expand="block">Register</ion-button>
  </div>
</ion-content>

补充SCSS：

.footer-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  // 适配背景避免内容穿透
  background-color: rgba(255, 255, 255, 0.9);
  ion-button {
    margin-bottom: 20px;
  }
}