如何防止Ionic2键盘弹出时ion-content发生尺寸调整？

我之前做Ionic2项目时也碰到过一模一样的问题——键盘一弹出来，ion-grid就被挤得变形，后来摸索出几个有效的解决方法，能实现键盘弹出时页面整体上推而不是压缩组件尺寸，给你一步步说：

1. 配置config.xml阻止WebView自动调整 #

首先得从Cordova的配置入手，它默认会在键盘弹出时调整WebView高度，我们把这个关掉：
找到项目根目录下的config.xml，添加这两个偏好设置：

<preference name="KeyboardResize" value="false" />
<preference name="KeyboardResizeMode" value="native" />

• KeyboardResize="false"：直接禁用WebView的自动尺寸调整
• KeyboardResizeMode="native"：让系统用原生方式处理键盘弹出，也就是把整个页面往上推

2. 确保ion-content的滚动配置正确 #

页面的内容容器ion-content的滚动属性要设置对，不然可能还是会出现奇怪的压缩：

<ion-content scroll="true">
  <!-- 你的ion-grid和其他页面内容都放在这里面 -->
</ion-content>

scroll="true"会确保内容区域支持滚动，当键盘弹出时，页面会自然上推，而不是去压缩里面的ion-grid。

3. 安装并配置Cordova键盘插件 #

要是你还没装这个插件，先在项目根目录执行命令安装：

cordova plugin add cordova-plugin-keyboard

安装完成后，在页面的TypeScript文件里做进一步配置，确保键盘行为符合预期：

import { Platform } from 'ionic-angular';

constructor(public platform: Platform) {
  this.platform.ready().then(() => {
    if (window.cordova && window.cordova.plugins.Keyboard) {
      // 禁用键盘触发的页面内部滚动，让页面整体上推
      cordova.plugins.Keyboard.disableScroll(true);
      // 可选：隐藏键盘顶部的工具栏，让界面更整洁
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
  });
}

4. 检查ion-grid的布局属性 #

最后别忘了检查你的ion-grid有没有设置固定高度或者强制拉伸的样式，比如如果给grid加了height: 100%或者flex: 1，可能还是会被压缩。尽量让grid的高度自适应内容，比如去掉固定高度设置，让它随里面的元素高度变化。

测试的时候一定要用真实的Android设备，模拟器的键盘行为有时候和真机不一样，调整完配置后重新打包安装到设备上就能看到效果啦。

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