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

Đang mở Phù hợp với người mới
#4,705 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
86/100
Loại issue
Tài liệu
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Lĩnh vực
documentation

Hướng nghiên cứu

Bắt đầu với docs/developing/keyboard.mdx và so sánh với phiên bản tương ứng tại versioned_docs/version-v8/developing/keyboard.mdx, gần Keyboard Lifecycle Events. Bổ sung hướng dẫn về hành vi của visual viewport so với layout viewport, interactive-widget=resizes-content, 100dvh và các chế độ thay đổi kích thước của Capacitor, sử dụng #26702 làm ngữ cảnh. Hoàn tất khi cả hai phiên bản đều giải thích chính xác hành vi và các phương án thay thế.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
MDX
Star
621
Fork
3.2k
Merge trung bình
1 ngày 2 giờ
Pull request đã merge (30 ngày)
86

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của ionic-team/ionic-docs

Tất cả issue của ionic-team/ionic-docs

Issue tương tự

Thêm issue về Documentation

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.