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

Aperta Adatta ai principianti
#4,705 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
86/100
Tipo di issue
Documentazione
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Ambito
documentation

Direzione di ricerca

Inizia da docs/developing/keyboard.mdx e confrontalo con la relativa versione versionata in versioned_docs/version-v8/developing/keyboard.mdx, vicino a Keyboard Lifecycle Events. Aggiungi indicazioni sul comportamento del viewport visuale rispetto al viewport di layout, su interactive-widget=resizes-content, su 100dvh e sulle modalità di ridimensionamento di Capacitor, usando #26702 come contesto. Il lavoro è completato quando entrambe le versioni spiegano accuratamente il comportamento e le alternative.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

content
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 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 (2016), #26702 (2023), #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
Lingua principale
MDX
Stelle
621
Fork
3.2k
Merge medio
1g 2h
PR unite (30g)
86

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di ionic-team/ionic-docs

Tutte le issue di ionic-team/ionic-docs

Issue simili

Altre issue su Documentation

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.