capacitor/ios의 키보드 사이즈를 스스로 처리하면 원활해지면.

안드로이드의 웹뷰는 키보드가 등장함에 따라 자동으로 크기를 조정(※ OS로서의 기능은 크기를 조정)하지만, iOS는 자동으로 크기를 조정하지 않는다.따라서 LINE과 같은'Footer 고정 Input 형식'이 있다면 키보드의 높이를 스스로 조절해야 한다.
Capacitor는 크기 조정 기능으로서 capacitor.config.json에서 Keyboard > resize를 지정할 수 있습니다.
https://capacitorjs.jp/docs/apis/keyboard#keyboard-configuration-ios-only
하지만 실상으로 보면キーボード出現後にリサイズが走る 실제 조정된 모습은 어울리지 않을 수 있다.

아직 캐피톨의 기능(설정)을 통해 원활하게 진행될 수 있는 설정이 없으니 스스로 원활하게 진행해 보자.
먼저 Capacitor의 크기 조정 기능을 해제합니다.capacitor.config.json에서 사용할 수 없습니다.

...
  "plugins": {
    "Keyboard": {
      "resize": "none"
    }
  }

resize: none.이어서 키보드가 나타나 더욱 원활하게 사이즈를 조정할 수 있도록 CSS에서 애니메이션을 설정합니다.Ionic/Anglarion-app인 경우 React 및 Vue 항목에 적합한 선택기를 지정합니다.

ion-app {
  margin-bottom: 0;
  transition: margin-bottom 420ms;
}

마지막으로 키보드가 나타나면 WebView가 변경됩니다.최초의 구성 요소가 호출될 때 청중을 미리 등록하세요.

if (this.platform.is('ios')) {
    window.addEventListener('keyboardWillShow', (e) => {
      const app: HTMLElement = document.querySelector('ion-app');
      app.style.marginBottom = (e as any).keyboardHeight + 'px';
  });
  window.addEventListener('keyboardWillHide', (e) => {
    const app: HTMLElement = document.querySelector('ion-app');
    app.style.marginBottom = '0px';
  });
}

이렇게 하면 키보드가 나타날 때 View의 Margin Bottom은 키보드의 높이에 따라 커지고 애니메이션(transion)도 이에 따라 실행된다.
다음과 같은 느낌으로 행동하라.
간단하네.iOS 키보드의 애니메이션 속도가 일정하지 않기 때문에 엄밀히 말하면transtion에 약간의 편차가 있을 수 있으므로 이에 얽매인 사람은 더욱 상세한 애니메이션 포인트를 설정하십시오.됐다!이런 분들을 아래의 이슈에서 소개해 주시면 정말 좋을 것 같습니다.
https://github.com/ionic-team/capacitor/issues/1540#issuecomment-735221275
그럼 안녕히 계세요.