ionic-team / ionic-team/ionic-docs

content: keyboard page needs on-screen keyboard layout guidance, and lifecycle samples read the wrong property

オープン 初心者向け
#4,705 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
content
主要言語
MDX
スター
621
フォーク
3.2k
平均マージ
1日 2時間
マージ済み PR(30日)
86

説明

### URL

https://ionicframework.com/docs/developing/keyboard

### Issue Description

The page covers `inputmode`, `enterkeyhint`, dark mode, the accessory bar and lifecycle events, but never says what the keyboard does to the viewport. In a mobile browser or PWA, Chrome and current Firefox shrink the visual viewport and leave the layout viewport at full height, so anything anchored to the bottom of the page stays where it was and the keyboard is drawn over it. This affects `ion-fab`, `ion-footer` and `ion-tab-bar`.

That is intended behavior, and refer to [#26702](https://github.com/ionic-team/ionic-framework/issues/26702) for the reasoning on why we do not resize the layout viewport by default. The problem is that the page never tells developers this is the model, nor how to opt into the alternative, so it keeps getting refiled: [#7013](https://github.com/ionic-team/ionic-framework/issues/7013) (2016), [#26702](https://github.com/ionic-team/ionic-framework/issues/26702) (2023), [#29765](https://github.com/ionic-team/ionic-framework/issues/29765) (2024). **Three reports over eight years** for behavior that one documented meta key configures.

Suggested addition, as a section near Keyboard Lifecycle Events:

- The keyboard shrinks the visual viewport, not the layout viewport, in browsers and PWAs, so bottom-anchored elements do not move.
- Apps that want the layout to move can add `interactive-widget=resizes-content` to the viewport meta tag, with the caveat that footers and tab bars then move above the keyboard too. Verified on Chrome 133 and Firefox 155.
- `100dvh` does not account for the on-screen keyboard and is not an alternative. Worth saying outright, because it is the first thing people reach for.
- Capacitor apps should use the Keyboard plugin's resize modes rather than the meta tag.

## Files

- `docs/developing/keyboard.mdx` (v9)
- `versioned_docs/version-v8/developing/keyboard.mdx`

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start with docs/developing/keyboard.mdx and compare its versioned counterpart at versioned_docs/version-v8/developing/keyboard.mdx, near Keyboard Lifecycle Events. Add guidance on visual versus layout viewport behavior, interactive-widget=resizes-content, 100dvh, and Capacitor resize modes, using #26702 for context. Done means both versions explain the behavior and alternatives accurately.

索引モデルが issue の本文から書いたものです。

評価

領域
documentation
issue の種類
ドキュメント
難易度
2/5
見積もり時間
1〜3時間
活発さ
活発
明瞭さ
明確に書かれている
初心者へのやさしさ
86/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。