Vào tháng 11, khi phát hành Chrome 108, Chrome sẽ thực hiện một số thay đổi đối với cách Chế độ xem bố cục hoạt động khi bàn phím ảo (OSK) xuất hiện. 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 mà chỉ đổi kích thước Khung nhìn hình ảnh. Điều này sẽ giúp Chrome trên Android hoạt động tương đương với 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 hình ảnh
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 xong. Thay vào đó, trình duyệt cung cấp cho bạn một khung nhìn để 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 một trang trở nên 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 position: fixed, các phần tử này sẽ được bố trí dựa trên Khung nhìn bố cục đó. Khi bạn cuộn xuống một trang, Chế độ xem bố cục vẫn ở nguyên vị trí, các phần tử sử dụng position: fixed cũng vậy.
position: fixed (hộp màu xanh dương). Hình ảnh hiển thị (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. Nó đại diện cho phần khung nhìn hiện đang hiển thị. Ở cấp độ thu phóng 1, Khung nhìn trực quan này lớn bằng Khung nhìn bố cục.
Khi chụm để thu phóng, bạn sẽ thu nhỏ kích thước của Khung nhìn hình ảnh so với Khung nhìn bố cục.
Hành vi đổi kích thước khung nhìn
Khi lấy tiêu điểm vào một mục 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ể hiển thị 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 làm như vậy, trình duyệt sẽ phản hồi theo một trong những cách sau liên quan đến nhiều khung nhìn:
- Chỉ đổi kích thước Khung nhìn trực quan và bù trừ Khung nhìn bố cục.
- Đổi kích thước cả Khung nhìn hình ảnh và Khung nhìn bố cục.
- Không đổi kích thước Khung nhìn bố cục hoặc Khung nhìn hình ảnh, phủ bàn phím ảo lê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 sẽ được sử dụng, nằm ngoài tầm kiểm soát của bạn.
Liên kết nhiều hành vi đổi kích thước
Trong Nỗ lực điều tra khung nhìn (một phần của Interop 2022), nhiều khía cạnh liên quan đến khung nhìn đã được điều tra cho 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 hiển thị. Điều này dẫn đến việc phân loại như sau:
Nhóm một
Các trình duyệt đổi kích thước Khung nhìn hình ảnh mà không làm ảnh hưởng đến Khung nhìn bố cục.
- Safari trên iOS
- Safari trên iPadOS
- Chrome trên Chrome OS
- Chrome trên iOS
- Chrome trên iPadOS
- Edge trên iOS
- Edge trên iPadOS
Nhóm hai
Các trình duyệt đổi kích thước cả Khung nhìn hình ảnh 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 ba
Các trình duyệt không đổi kích thước khung nhìn nào:
- Không có theo mặc định – Trong Chrome trên Android, bạn có thể chọn sử dụng hành vi này thông qua VirtualKeyboard API
Tác dụng phụ của mỗi hành vi
Sự khác biệt này trong cách các khung nhìn được đổi kích thước khi OSK hiển thị dẫn đến hành vi định cỡ và bố cục không tương tác được của các trang web.
Trong các trình duyệt thuộc nhóm 1, với OSK hiển thị:
- Các giá trị được tính toán cho đơn vị khung nhìn tương đối 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ác phần tử sử dụng
position: fixedvẫn giữ nguyên và có thể bị OSK che khuất.
Trong các trình duyệt từ nhóm 2, với OSK hiển thị:
- Các giá trị được tính toán cho các đơn vị tương ứng với khung nhìn sẽ thu hẹp.
- Các phần tử được thiết kế để chiếm toàn bộ không gian hình ảnh sẽ bị thu hẹp.
- Các phần tử sử dụng
position: fixedcó thể kết thúc ở nơi 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 sử dụng tính năng đánh hơi User-Agent hoặc dựa vào tập lệnh mở rộng, bạn không thể biết hành vi nào được sử dụng. Bạn cũng không thể thay đổi hành vi này vì hành vi này được xác định bằng 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 đổi kích thước khung nhìn để không còn đổi kích thước Khung nhìn bố cục khi bàn phím ảo xuất hiện.
Việc này sẽ điều chỉnh hành vi của Chrome trên Android cho phù hợp 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, tính năng này 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 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. Chrome 108 cũng sẽ ra mắt một tiện ích cho thẻ meta của khung nhìn.
Thông qua phím interactive-widget, bạn có thể cho Chrome biết hành vi đổi kích thước mà bạn muốn.
Các 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 khung nhìn nào.
Để chọn sử dụng lại hành vi của Chrome "cũ" trên Android, hãy đặt thẻ meta khung nhìn thành:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Nếu bạn không thêm interactive-widget vào thẻ meta khung nhìn, thì Chrome sẽ sử dụng chế độ mặc định, đó là resizes-visual.
Khi được trực quan hoá, các chế độ cài đặt này sẽ có hiệu ứng như sau đối với các khung nhìn:
resizes-visual, resizes-content và overlays-content.
Bạn có thể thử tác động của từng giá trị trong trình duyệt trên trang web minh hoạ này.
Kiểm thử và phản hồi
Chúng tôi dự kiến sẽ có một số điểm khác biệt nhỏ đối với các trang web hiện có, nhưng những điểm khác biệt này sẽ không gây cản trở vì Chrome 108 trên Android hiện sẽ hoạt động tương tự như Safari trên iOS. Do đó, những 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, tác giả trang web nên tích cực kiểm thử trang web của mình trong Chrome 108 (phiên bản thử nghiệm beta 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 các đơn vị tương ứng với Khung nhìn.
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 đề báo cáo.