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 rộng 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 thanh hệ thống Android.
Trước 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 mà 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 thông báo, đồng thời cho phép tương tác trực tiếp với thiết bị ở mọi nơi.
Ở đầu màn hình, bạn có thể thấy thanh trạng thái. Thanh này chứa 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 điều hướng bằng các nút quay lại, màn hình chính và tổng quan. Đây có thể là chế độ thao tác 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 hiển thị tràn viền
Khi bạn truy cập vào một trang web, trang web đó sẽ xuất hiện trong một hình chữ nhật được gọi là khung hiển thị (bố cục).
Trong Chrome trên Android, trước Chrome 135, khung hiển thị 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 (hoặc không hiện diện) của thanh địa chỉ của Chrome có thể ảnh hưởng đến kích thước 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 ẩn đi khi trang được cuộn. Tuy nhiên, thanh trạng thái trên cùng và thanh điều hướng gốc của Android ở dưới cùng vẫn cố định tại chỗ.
Ở đây, kích thước của khung hiển thị bố cục thay đổi khi thanh địa chỉ của Chrome thu gọn hoặc mở rộng.
Hành vi của Chrome khi ở chế độ tràn viền
Từ Chrome 135, Chrome có thể vẽ nội dung trên web cho đến cạnh dưới 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ỉ.
Động, tràn viền với "phần cằm"
Theo mặc định, chế độ hiển thị tràn viền của Chrome sẽ cho thấy một thanh dưới cùng linh động mới (còn gọi là "phần cằm") ở phía trên khu vực thanh điều hướng bằng cử chỉ. Giống như thanh địa chỉ của Chrome, phần cằm 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à phần cằm của Chrome đều tự động thu gọn khi trang cuộn xuống. Điều này khiến khung hiển thị mở rộng, cho phép nội dung web được vẽ lên đến cạnh dưới của thiết bị.
Hành vi này của phần cằm là hành vi mặc định mới của Chrome kể từ Chrome 135 trở đi.
Chuyển sang chế độ hiển thị tràn viền theo mặc định bằng lựa chọn sử dụng
Những trang web được thiết kế 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, theo mặc định, khung hiển thị sẽ mở rộng lên đến cạnh dưới mà không bao giờ để lộ phần cằm.
Một trang có thể cho biết rằng trang đó hỗ trợ chế độ hiển thị tràn viền bằng cách sử dụng thẻ meta viewport và khoá viewport-fit của thẻ đó.
Để chọn sử dụng chế độ hiển thị tràn viền, hãy đặt viewport-fit thành giá trị cover.
<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-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 cân nhắc 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 cằm dưới sẽ tự động di chuyển ra khỏi tầm nhìn. 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 chọn chế độ hiển thị tràn viền theo mặc định hoặc có một phần tử nằm ở cuối khung hiển thị, thì bạn có thể cần tính đến trường hợp nội dung đó có khả năng bị che khuất.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
Khi phần cằm xuất hiện, ban đầu người dùng có thể truy cập vào nội dung nhưng nội dung sẽ bị thanh điều hướng của Android che khuất khi phần cằm biến mất.
Để giảm thiểu vấn đề này, hãy sử dụng phần lồng ghép vùng an toàn để luôn đặt các phần tử bị ảnh hưởng lên trên thanh điều hướng bằng cử chỉ ở dưới cùng của Android gốc hoặc để phần 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ồng ghép 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ồng ghép trên cùng, bên phải, dưới cùng và bên trái từ cạnh của khung nhìn.
Khi kết hợp, 4 giá trị này 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à không bị che khuất bởi những thứ như thanh điều hướng bằng cử chỉ của Android.
Sử dụng khoảng lùi dưới cùng của vùng an toàn
Đối với những phần tử nằm ở cuối khung nhìn, hãy 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ị do safe-area-inset-bottom trả về sẽ được cập nhật linh hoạt khi phần cằm di chuyển ra khỏi đường viền, nhờ đó các phần tử ở vị trí dưới cùng sẽ nằm gọn gàng 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 phần cằm xuất hiện, 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 cằm biến mất, phần tử này cũng nằm phía trên phần cằm.Như bạn có thể thấy trong hình minh hoạ, kết quả vẫn chưa hoàn hảo: khi cằm được di chuyển ra khỏi đường đi, nội dung còn lại của trang sẽ xuất hiện trong vùng thanh điều hướng bằng cử chỉ. Điều này là do ở trạng thái này, khung hiển thị sẽ mở rộng vào khu vực thanh điều hướng bằng cử chỉ.
Để ngăn nội dung bị vẽ bên dưới nội dung được cố định ở dưới cùng, một phương pháp thường dùng là đặt padding-bottom thành safe-area-inset-bottom. Nhờ đó, phần tử được neo ở dưới cùng sẽ tự động tăng kích thước 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 dùng vì nó dẫn đến hiện tượng layout thrashing (bố cục bị giật) trong khi cằm di chuyển ra khỏi đường viền.
Đừ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 khoảng lùi dưới cùng của vùng an toàn và khoảng lùi dưới cùng tối đa của vùng an toàn
Thay vào đó, bạn nên sử dụng kết hợp safe-area-inset-bottom và safe-area-max-inset-bottom. Không giống như safe-area-inset-bottom linh động (cập nhật linh động khi cằm di chuyển ra ngoài), safe-area-max-inset-bottom biểu thị 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 cố định ở dưới cùng ngay từ đầu và 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));
}
Kết quả hiển thị giống với phương pháp padding-bottom: env(safe-area-inset-bottom, 0px); nhưng hiệu suất cao hơn nhiều. Vì chỉ cần thay đổi giá trị được tính cho bottom khi cằm di chuyển ra xa, nên không xảy ra tình trạng lãng phí bố cục.
Dùng thử chế độ tràn viền trước Chrome 135
Để dùng chế độ hiển thị tràn viền trước khi phát hành công khai phiên 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 "Đã bật chế độ gỡ lỗi" để tô màu hồng cho một nửa cằm nhằm phân biệt rõ hơn với các giao diện người dùng khác)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(không đặt thành "Đã bật" mà đặt thành "Đã bật Dispatch yOffset")DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(không đặt thành "Đã bật" mà đặt thành "Đã bật biến thể có thể cuộn")
Đảm bảo rằng các cờ sau đây không được bật:
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Khởi động lại Chrome 2 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à việc triển khai chế độ tràn viền của Chrome, vui lòng liên hệ với chúng tôi bằng cách báo cáo lỗi Chromium trong thành phần "Giao diện người dùng > Trình duyệt > Thiết bị di động > EdgeToEdge". Chúng tôi đánh giá cao phản hồi của bạn.