Ngày xuất bản: 28 tháng 2 năm 2025
Tràn viền là một tính năng của Android cho phép các ứng dụng trải dài trên toàn bộ chiều rộng và chiều cao của màn hình bằng cách vẽ phía sau các thanh hệ thống Android.
Trước phiên bản Chrome 135, Chrome trên Android không vẽ tràn viền. Hướng dẫn này giải thích ảnh hưởng của thay đổi này đối với các trang web và những việc bạn có thể làm với tư cách là nhà phát triển để thích ứng với thay đổi này.
Quán bar ở mọi nơi
Android đi kèm với thanh hệ thống do chính hệ điều hành cung cấp.
Thanh trạng thái, thanh chú thích và thanh điều hướng được gọi chung là thanh hệ thống. Các tiện ích này hiển thị thông tin quan trọng như mức pin, thời gian và cảnh báo có thông báo, đồng thời cho phép tương tác trực tiếp với thiết bị từ mọi nơi.
Ở đầu màn hình, bạn có thể thấy thanh trạng thái, trong đó có các biểu tượng thông báo và biểu tượng hệ thống.
Ở cuối màn hình, bạn có thể thấy thanh điều hướng. Thanh này cho phép bạn điều khiển thao tác bằng các nút điều khiển quay lại, màn hình chính và tổng quan. Đây có thể là thanh điều hướng bằng 3 nút cổ điển hoặc thanh điều hướng bằng cử chỉ hiện đại.
Ngoài các thanh hệ thống Android, Chrome còn có một thanh địa chỉ tự động mở rộng và thu gọn khi bạn di chuyển.
Chrome chuyển sang chế độ tràn viền
Khi bạn truy cập vào một trang web, trang web đó sẽ được trình bày trong một hình chữ nhật được gọi là khung nhìn (bố cục).
Trong Chrome trên Android, trước phiên bản Chrome 135, khung nhìn bố cục đó được vẽ giữa thanh trạng thái trên cùng và thanh điều hướng bằng cử chỉ dưới cùng. Sự hiện diện của thanh địa chỉ của Chrome (hoặc thiếu thanh địa chỉ) có thể ảnh hưởng đến kích thước của khung nhìn, nhưng khung nhìn sẽ không bao giờ mở rộng vào thanh hệ thống trên cùng hoặc thanh điều hướng bằng cử chỉ dưới cùng.
Kể từ Chrome 135, khung nhìn được phép mở rộng vào thanh điều hướng bằng cử chỉ của Android. Đây là hành vi được mô tả là tràn viền.
Hành vi của Chrome khi không tràn viền
Bản ghi sau đây cho thấy Chrome trên Android không hỗ trợ chế độ tràn viền, thanh địa chỉ của Chrome (ở trên cùng) sẽ tự động di chuyển ra ngoài khi trang được cuộn. Tuy nhiên, thanh trạng thái trên cùng và thanh điều hướng dưới cùng của Android vẫn giữ nguyên vị trí.
Tại đây, kích thước của khung nhìn bố cục thay đổi khi thanh địa chỉ của Chrome thu lại hoặc mở rộng.
Hành vi của Chrome khi tràn viền
Kể từ Chrome 135, Chrome có thể vẽ nội dung trên web đến cạnh dưới cùng của thiết bị bằng cách mở rộng khung nhìn vào khu vực thanh điều hướng bằng cử chỉ.
Tràn viền linh hoạt với "phần cằm"
Theo mặc định, chế độ tràn viền của Chrome sẽ hiển thị một thanh dưới cùng mới và linh động, được gọi là "phần dưới" trên khu vực thanh điều hướng bằng cử chỉ. Giống như thanh địa chỉ của Chrome, thanh dưới cùng này sẽ di chuyển ra ngoài khi bạn bắt đầu cuộn và ảnh hưởng đến kích thước của khung nhìn.
Trong bản ghi sau đây về Chrome trên Android có hỗ trợ chế độ tràn viền, cả thanh địa chỉ và thanh dưới cùng của Chrome đều tự động thu lại khi trang cuộn xuống. Điều này khiến khung nhìn mở rộng, cho phép nội dung trên web được vẽ đến cạnh dưới của thiết bị.
Hành vi này của thanh dưới cùng là hành vi mặc định mới của Chrome kể từ phiên bản Chrome 135 trở đi.
Chuyển sang chế độ tràn viền theo mặc định bằng cách chọn sử dụng
Các trang web được xây dựng cho chế độ tràn viền có thể cho biết điều đó bằng cách điều chỉnh thẻ meta viewport. Khi được bật, khung nhìn sẽ mở rộng đến cạnh dưới theo mặc định mà không bao giờ hiển thị phần cằm.
Một trang có thể cho biết trang đó hỗ trợ chế độ tràn viền bằng cách sử dụng thẻ meta viewport và khoá viewport-fit.
Để chọn sử dụng chế độ tràn viền, hãy đặt viewport-fit thành giá trị cover.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Tìm hiểu thêm về các giá trị khác nhau của viewport-fit trên MDN.
Xử lý nội dung có thể bị thanh điều hướng bằng cử chỉ che khuất
Ở chế độ tràn viền, bạn nên xem xét mọi nội dung có thể bị thanh điều hướng bằng cử chỉ che khuất.
Trong hầu hết các trường hợp, bạn không cần làm gì cả vì phần dưới cùng sẽ tự động di chuyển ra khỏi vị trí. Người dùng vẫn có thể truy cập vào tất cả nội dung trên trang web của bạn như trước đây.
Tuy nhiên, nếu bạn chọn hiển thị tràn viền theo mặc định hoặc có một phần tử được đặt ở cuối khung nhìn, thì bạn có thể cần phải tính đến khả năng nội dung đó bị che khuất.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
Khi có thanh dưới cùng, người dùng có thể truy cập vào nội dung ngay từ đầu, nhưng nội dung sẽ bị thanh điều hướng của Android che khuất khi thanh dưới cùng biến mất.
Để giảm thiểu, hãy sử dụng các phần lồng ghép vùng an toàn để luôn đặt các phần tử bị ảnh hưởng phía trên thanh điều hướng bằng cử chỉ dưới cùng của Android hoặc để nền của các phần tử đó mở rộng vào vùng đó.
Phần lồng ghép vùng an toàn
Phần lề của vùng an toàn là 4 biến môi trường xác định một hình chữ nhật theo phần lề trên, phải, dưới và trái từ cạnh của khung nhìn.
Khi kết hợp, 4 giá trị này sẽ tạo thành hình chữ nhật vùng an toàn, nơi bạn có thể đặt nội dung một cách an toàn để nội dung không bị cản trở bởi những thứ như thanh điều hướng bằng cử chỉ của Android.
Sử dụng phần lồng ghép dưới cùng của vùng an toàn
Đối với các phần tử được đặt ở cuối khung nhìn, hãy sử dụng safe-area-inset-bottom làm giá trị cho thuộc tính bottom để ngăn phần tử đó nằm bên dưới thanh điều hướng bằng cử chỉ. Giá trị mà safe-area-inset-bottom trả về sẽ được cập nhật linh động khi phần cằm di chuyển ra khỏi vị trí, nhờ đó, các phần tử ở vị trí dưới cùng sẽ nằm ngay phía trên thanh điều hướng bằng cử chỉ của Android.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}
bottom. Khi thanh dưới cùng hiển thị, thanh này sẽ nằm phía trên thanh điều hướng bằng cử chỉ của Android. Khi phần dưới cùng biến mất, phần tử này cũng nằm phía trên phần dưới cùng.Như bạn có thể thấy trong hình minh hoạ, kết quả vẫn chưa hoàn hảo: khi phần cằm được di chuyển ra ngoài, nội dung còn lại của trang sẽ hiển thị trong vùng thanh điều hướng bằng cử chỉ. Điều này là do trong trạng thái này, khung nhìn mở rộng vào khu vực thanh điều hướng bằng cử chỉ.
Để ngăn nội dung hiển thị bên dưới nội dung được neo ở dưới cùng, một phương pháp thường dùng là đặt padding-bottom thành safe-area-inset-bottom. Bằng cách đó, phần tử được neo ở dưới cùng sẽ tự động tăng lên khi phần cằm ẩn đi. Mặc dù cách này có hiệu quả, nhưng bạn không nên áp dụng vì sẽ dẫn đến tình trạng bố cục bị giật trong khi phần cằm di chuyển ra ngoài.
Đừng đặt padding thành giá trị safe-area-inset.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}
Sử dụng phần lồng ghép dưới cùng của vùng an toàn và phần lồng ghép tối đa dưới cùng của vùng an toàn
Thay vào đó, bạn nên kết hợp safe-area-inset-bottom và safe-area-max-inset-bottom. Không giống như safe-area-inset-bottom động (cập nhật linh động khi phần cằm di chuyển ra ngoài), safe-area-max-inset-bottom đại diện cho giá trị tối đa của safe-area-inset-bottom.
Sử dụng safe-area-max-inset-bottom này để tăng kích thước phần tử được neo ở dưới cùng, đồng thời kết hợp với safe-area-inset-bottom để kéo phần tử xuống sao cho phần tử nằm phía sau cằm.
Sử dụng safe-area-max-inset-bottom kết hợp với safe-area-inset-bottom
:root {
--safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
--bottom-bar-height: 50px;
}
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
height: var(--bottom-bar-height);
padding-bottom: var(--safe-area-max-inset-bottom);
bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}
body {
padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}
Dùng thử bản minh hoạ trực tiếp
Kết quả trực quan giống như phương pháp padding-bottom: env(safe-area-inset-bottom, 0px); nhưng hiệu suất tốt hơn nhiều. Vì chỉ có giá trị được tính toán cho bottom cần thay đổi khi phần cằm di chuyển ra xa, nên không xảy ra hiện tượng giật cục bố cục.
Dùng thử chế độ tràn viền trước Chrome 135
Để dùng thử chế độ tràn viền trước khi phát hành công khai bản ổn định, bạn cần bật một số cờ tính năng của Chrome thông qua chrome://flags:
EdgeToEdgeBottomChin(bạn có thể đặt thành "Enabled Debug" (Đã bật gỡ lỗi) để tô màu hồng cho một nửa phần cằm nhằm phân biệt rõ hơn với các thành phần khác trên giao diện người dùng)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(không đặt thành "Enabled" (Đã bật) mà đặt thành "Enabled Dispatch yOffset" (Đã bật Dispatch yOffset))DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(đừng đặt thành "Đã bật" mà hãy đặt thành "Đã bật biến thể có thể cuộn")
Đảm bảo rằng các cờ sau không được bật:
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Khởi động lại Chrome hai lần.
Chúng tôi rất mong bạn đóng góp ý kiến
Nếu bạn có ý kiến phản hồi về Chrome và cách triển khai chế độ tràn viền, vui lòng liên hệ với chúng tôi bằng cách gửi lỗi Chromium trong thành phần "UI > Browser > Mobile > EdgeToEdge" (Giao diện người dùng > Trình duyệt > Thiết bị di động > Tràn viền). Chúng tôi đánh giá cao phản hồi của bạn.