Vào tháng 11, với bản phát hành Chrome 108, Chrome sẽ thực hiện một số thay đổi về cách hoạt động của Khung nhìn bố cục khi bàn phím ảo (OSK) hiển thị. Với thay đổi này, Chrome trên Android sẽ không còn đổi kích thước Khung nhìn bố cục và chỉ thay đổi kích thước Khung nhìn trực quan. Điều này sẽ làm cho hành vi của Chrome trên Android ngang bằng với hành vi của Chrome trên iOS và Safari trên iOS.
Dưới đây là một số thông tin cơ bản về những gì đang diễn ra, lý do Chrome thực hiện thay đổi này và những việc bạn có thể làm để chuẩn bị.
Khung nhìn bố cục và khung nhìn trực quan
Khi truy cập vào một trang web, bạn không thể xem toàn bộ nội dung của trang sau khi trang đó đã tải. Thay vào đó, trình duyệt sẽ cung cấp cho bạn một khung nhìn, qua đó bạn có thể xem một phần của trang. Khung nhìn này còn được gọi là Khung nhìn bố cục. Khi nội dung của trang quá lớn, trình duyệt sẽ cung cấp cơ chế cuộn.
Khi định vị các phần tử bằng cách sử dụng position: fixed, các phần tử này sẽ được bố trí theo khung nhìn bố cục đó. Vì Khung nhìn bố cục vẫn giữ nguyên khi bạn cuộn xuống một trang, các phần tử sử dụng position: fixed cũng sẽ giữ nguyên.
position: fixed (hộp màu xanh dương). Hiển thị là (từ trái sang phải) Safari trên iPhone, Chrome trên Android và Firefox trên Android.
Ngoài Khung nhìn bố cục này, trình duyệt cũng cung cấp Khung nhìn trực quan. Số liệu này đại diện cho phần khung nhìn hiện đang hiển thị. Ở mức thu phóng 1, Khung hiển thị trực quan này lớn bằng Khung nhìn bố cục.
Khi chụm-mở rộng, bạn sẽ thu nhỏ kích thước của Khung nhìn trực quan liên quan đến Khung nhìn bố cục.
Thao tác đổi kích thước khung nhìn
Khi lấy tiêu điểm là dữ liệu nhập hoặc bất kỳ khu vực có thể chỉnh sửa nào khác, các thiết bị (chủ yếu là thiết bị màn hình cảm ứng) có thể cho thấy bàn phím ảo. Bàn phím này, thường được gọi là bàn phím ảo,cho phép người dùng nhập nội dung vào khu vực có thể chỉnh sửa.
Khi thực hiện việc này, các trình duyệt sẽ phản hồi theo một trong những cách sau đây liên quan đến các khung nhìn khác nhau:
- Chỉ đổi kích thước của Khung nhìn trực quan và bù trừ Khung nhìn bố cục.
- Đổi kích thước cả Khung nhìn trực quan và Khung nhìn bố cục.
- Đừng đổi kích thước bất kỳ Khung hiển thị bố cục hoặc Khung hiển thị trực quan nào, phủ bàn phím ảo lên trên cả hai.
Ba hành vi này được minh hoạ như sau:
Tuỳ thuộc vào kết hợp trình duyệt và hệ điều hành mà khách truy cập sử dụng, một trong các hành vi được sử dụng, nằm ngoài tầm kiểm soát của bạn.
Liên kết các hành vi đổi kích thước
Trong phần Nỗ lực điều tra khung nhìn của Interop 2022, chúng tôi điều tra nhiều khía cạnh liên quan đến khung nhìn trên mọi tổ hợp trình duyệt và hệ điều hành chính.
Một trong những khía cạnh được kiểm thử là hành vi đổi kích thước khi OSK xuất hiện. Điều này dẫn đến việc phân loại sau:
Nhóm 1
Các trình duyệt đổi kích thước Visual Viewport, không ảnh hưởng đến Layout Viewport.
- Safari trên iOS
- Safari trên iPadOS
- Chrome trên ChromeOS
- Chrome trên iOS
- Chrome trên iPadOS
- Edge trên iOS
- Edge trên iPadOS
Nhóm hai
Những trình duyệt đổi kích thước cả Khung nhìn trực quan và Khung nhìn bố cục.
- Chrome trên Android
- Firefox trên Android
- Edge trên Android
- Firefox trên iOS
Nhóm 3
Các trình duyệt không đổi kích thước khung nhìn:
- Không có gì theo mặc định – Trong Chrome trên Android, bạn có thể chọn tham gia hành vi này thông qua API VirtualKeyboard
Tác động phụ của từng hành vi
Sự khác biệt về cách thay đổi kích thước các khung nhìn khác nhau khi hiển thị OSK sẽ dẫn đến bố cục và hành vi định kích thước không tương tác của các trang web.
Trong các trình duyệt ở nhóm 1, có hiển thị OSK:
- Các giá trị đã tính toán cho đơn vị tương đối với khung nhìn vẫn giữ nguyên.
- Các phần tử được thiết kế để chiếm toàn bộ không gian hình ảnh sẽ giữ nguyên kích thước của chúng.
- Các thành phần sử dụng
position: fixedvẫn giữ nguyên và có thể bị OSK che khuất.
Trong các trình duyệt thuộc nhóm 2, có hiển thị OSK:
- Các giá trị được tính toán cho đơn vị tương đối với khung nhìn sẽ rút gọn.
- Các thành phần được thiết kế để thu nhỏ toàn bộ không gian hình ảnh.
- Các phần tử sử dụng
position: fixedcó thể chuyển đến vị trí khác trong bố cục.
position: fixed (hộp màu xanh dương). Hiển thị là Safari trên iOS (bên trái) và Chrome trên Android (ở giữa và bên phải).
Trừ phi bạn dùng tác nhân người dùng để nhận biết hoặc dựa vào tập lệnh toàn diện, bạn sẽ không thể biết được hành vi nào được sử dụng. Bạn cũng không thể thay đổi hành vi, vì hành vi này được xác định bởi kết hợp trình duyệt và hệ điều hành mà người dùng đang truy cập.
Thay đổi hành vi mặc định trong Chrome 108
Kể từ Chrome 108, Chrome trên Android sẽ điều chỉnh hành vi thay đổi kích thước khung nhìn để không còn thay đổi kích thước Khung nhìn bố cục khi bàn phím ảo hiển thị.
Việc này sẽ điều chỉnh hành vi của Chrome trên Android giống với hành vi của Chrome trên iOS, iPadOS, Windows và CrOS, Safari trên iOS và iPadOS, cũng như Edge trên iOS, iPadOS và Windows.
Nhờ thay đổi này, tác giả có thể biết hành vi nào sẽ được sử dụng, bất kể Chrome đang chạy trên hệ điều hành nào. Hơn nữa, việc này còn cho phép các đơn vị tương đối với khung nhìn ổn định: việc hiển thị hoặc ẩn OSK không ảnh hưởng đến các đơn vị này.
Chọn sử dụng một hành vi khác
Nếu bạn muốn trang web của mình sử dụng hành vi đổi kích thước trước phiên bản 108, đừng lo lắng. Ngoài ra, thông tin vận chuyển trong Chrome 108 là phần mở rộng cho thẻ meta khung nhìn.
Thông qua khoá interactive-widget, bạn có thể cho Chrome biết hành vi đổi kích thước nào mà bạn muốn.
Giá trị được chấp nhận cho interactive-widget là:
resizes-visual: Chỉ đổi kích thước Khung nhìn trực quan chứ không đổi kích thước Khung nhìn bố cục.resizes-content: Đổi kích thước cả khung nhìn trực quan và khung nhìn bố cục.overlays-content: Không đổi kích thước bất kỳ khung nhìn nào.
Để chọn quay lại hành vi Chrome "cũ" trên Android, hãy đặt thẻ meta khung nhìn như sau:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Nếu bạn không đưa interactive-widget vào thẻ meta khung nhìn, Chrome sẽ sử dụng hành vi mặc định, đó là resizes-visual.
Hình ảnh minh hoạ là chế độ cài đặt có hiệu lực đối với nhiều khung nhìn khác nhau:
resizes-visual, resizes-content và overlays-content.
Bạn có thể thử nghiệm tác động của từng giá trị trong trình duyệt trên trang web minh hoạ này.
Thử nghiệm và phản hồi
Chúng tôi dự kiến sẽ có một số điểm khác biệt nhỏ so với các trang web hiện có. Tuy nhiên, những điểm khác biệt này sẽ không bị chặn vì Chrome 108 trên Android giờ đây sẽ hoạt động tương tự như Safari trên iOS. Do đó, các trang web hoạt động tốt trên Safari trên iOS cũng sẽ hoạt động tốt trên Chrome 108 trên Android.
Tuy nhiên, các tác giả trang web nên chủ động thử nghiệm trang web của họ trong Chrome 108 (thử nghiệm) kể từ ngày 27 tháng 10 năm 2022. Cụ thể, hãy chú ý đến các phần tử sử dụng position: fixed và/hoặc dựa vào đơn vị tương đối với khung hiển thị.
Bạn có thể báo cáo ý kiến phản hồi tại crbug.com. Hãy nhớ thêm “bàn phím ảo” vào tiêu đề của báo cáo.