Hướng dẫn di chuyển từ cạnh sang cạnh trên Chrome cho Android

Bramus

Ngày xuất bản: 28 tháng 2 năm 2025

Chế độ 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 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 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 trang web và những việc bạn có thể làm để thích ứng với thay đổi này.

Lưu ý: Thay đổi trong Chrome 135 nhắm đến các thiết bị màn hình nhỏ. Chrome trên Android chạy trên thiết bị màn hình lớn hiện không được hỗ trợ và sẽ được giải quyết trong bản phát hành Chrome sau này.

Lưu ý: Tính năng này đang được triển khai bằng Biến thể Chrome. Do đó, bạn có thể thấy lỗi này trong một phiên bản Chrome cũ.

Thanh ở 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 vùng này hiển thị thông tin quan trọng như mức pin, thời gian và thông báo, đồng thời cho phép tương tác trực tiếp với thiết bị từ bất kỳ đâu.

Ở đầu màn hình, bạn có thể thấy thanh trạng thái chứa các biểu tượng thông báo và biểu tượng hệ thống.

Thanh trạng thái trên Android được làm nổi bật (source).

Ở 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 hướng bằng các nút điều khiển quay lại, trang chủ và tổng quan. Đó 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.

Thanh điều hướng bằng cử chỉ (source).

Ngoài các thanh hệ thống Android, bản thân Chrome còn có một thanh địa chỉ tự động mở rộng và thu gọn khi bạn cuộn.

Chrome hiển thị 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à thành phần hiển thị (bố cục).

Trong Chrome trên Android, trước 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. Việc có (hoặc không có) thanh địa chỉ của Chrome 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ích thước tối thiểu và tối đa của khung nhìn trong Chrome trên Android trước Chrome 135. Các kích thước này được gọi là khung nhìn nhỏ và lớn. Bản thân khung nhìn có đường viền màu xanh lam đứt nét.

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.

Khung nhìn lớn hiển thị trong Chrome trên Android không tràn viền (bên trái) và trong Chrome tràn viền (bên phải). Trong Chrome có hỗ trợ tràn viền, khung nhìn sẽ mở rộng vào khu vực thanh điều hướng bằng cử chỉ khi các thanh công cụ động của Chrome được thu lại.

Lưu ý: Chrome trên iOS đã thêm tính năng hỗ trợ tràn viền với bản phát hành iOS 11.3. Các đề xuất trong hướng dẫn này cũng áp dụng cho Chrome chạy trên iOS.

Hành vi của Chrome không tràn viền

Bản ghi sau đây cho thấy Chrome trên Android không hỗ trợ tràn viền, thanh địa chỉ của Chrome (ở trên cùng) sẽ tự động di chuyển ra ngoài khi cuộn trang. Tuy nhiên, thanh trạng thái trên cùng gốc Android và thanh điều hướng gốc Android ở dưới cùng vẫn được cố định.

Hành vi cũ: Chrome trên Android không hỗ trợ tràn viền và https://developer.chrome.com/ đã tải.

Tại đây, kích thước của khung nhìn bố cục sẽ thay đổi khi thanh địa chỉ của Chrome thu gọn hoặc mở rộng.

Hành vi của Chrome với màn hình tràn viền

Kể từ Chrome 135, Chrome có thể vẽ nội dung web lên đế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ỉ.

Màn hình tràn viền động với "cằm"

Theo mặc định, Chrome tràn viền sẽ hiển thị một thanh dưới cùng động mới có tên là "cằm" 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 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ợ tràn viền, cả thanh địa chỉ Chrome và phần cằm đều tự động thu lại khi cuộn xuống. Điều này làm cho khung nhìn mở rộng, cho phép nội dung web được vẽ lên cạnh dưới cùng của thiết bị.

Hành vi mới: Chrome trên Android hỗ trợ tràn viền và đã tải https://developer.chrome.com/. Hãy chú ý cách phần cằm dưới cùng trượt ra khi cuộn trang.

Hành vi này là hành vi mặc định mới của Chrome từ Chrome 135 trở đi.

Chuyển sang chế độ tràn viền theo mặc định với lựa chọn sử dụng

Các trang web được tạo cho màn hình tràn viền có thể cho biết điều đó bằng cách điều chỉnh thẻ meta viewport. Khi bật, theo mặc định, khung nhìn sẽ mở rộng đến cạnh dưới cùng mà không bao giờ hiển thị phần cằm.

Hành vi mới khi chọn sử dụng chế độ tràn viền: Khung nhìn mở rộng đến cạnh dưới cùng khi tải trang. Không có cằm.

Một trang có thể cho biết trang đó hỗ trợ tràn viền bằng cách sử dụng thẻ meta viewport và khoá viewport-fit của trang đó.

Để 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 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 ngoài. 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ế độ 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 nội dung có thể bị che khuất.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

Khi có cằm, người dùng ban đầu sẽ có thể truy cập vào nội dung nhưng sẽ bị thanh điều hướng của Android che khuất khi cằm biến mất.

Hình minh hoạ một trang web có phần tử được đặt ở dưới cùng với "bottom: 0". Khi phần tử này hiển thị, phần tử được đặt ở dưới cùng sẽ nằm phía trên thanh điều hướng của Android. Khi cằm đã di chuyển ra xa, phần tử này sẽ được đặt phía sau thanh điều hướng của Android, che khuất một phần phần tử đó tại thời điểm đó.

Để giảm thiểu vấn đề này, 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ỉ gốc của Android ở dưới cùng hoặc để nền của các phần tử đó mở rộng vào khu vực đó.

Phần lồng ghép vùng an toàn

Browser Support

• 69
• 79
• 65
• 11

Source

Phần lồng ghép vùng an toàn là 4 biến môi trường xác định hình chữ nhật bằng các 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 khung nhìn.

Khi kết hợp 4 giá trị này, bạn sẽ có được hình chữ nhật vùng an toàn, trong đó bạn có thể đặt nội dung một cách an toàn để nội dung không bị các yếu tố như thanh điều hướng bằng cử chỉ Android che khuất.

Hình minh hoạ Chrome ở chế độ tràn viền với khung nhìn và hình chữ nhật vùng an toàn được tô màu vàng. Vì phần cằm được thu lại, nên phần lồng ghép dưới cùng của vùng an toàn sẽ ngăn hình chữ nhật vùng an toàn tiếp cận thanh điều hướng bằng cử chỉ. Do đó, bạn sẽ thấy khung nhìn xem trước từ bên dưới thanh điều hướng bằng cử chỉ đó.

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ử đó được đặt bên dưới thanh điều hướng bằng cử chỉ. Giá trị do safe-area-inset-bottom trả về được cập nhật linh động khi phần cằm di chuyển ra ngoài, dẫn đến các phần tử ở vị trí dưới cùng 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);
}

Hình minh hoạ một trang web có phần tử ở vị trí dưới cùng sử dụng vùng an toàn dưới cùng lồng ghép với thuộc tính bottom. Khi phần cằm 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 cằm biến mất, phần tử này cũng nằm phía trên cằm.

Như bạn có thể thấy trong hình minh hoạ, kết quả chưa hoàn hảo: khi cằm được di chuyển ra ngoài, nội dung trang còn lại sẽ hiển thị trong khu vực thanh điều hướng bằng cử chỉ. Điều này là do ở 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 được vẽ bên dưới nội dung được neo ở dưới cùng, 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 phát triển khi cằm tự ẩn. Mặc dù phương pháp này có hiệu quả, nhưng bạn không nên sử dụng vì nó sẽ dẫn đến tình trạng bố cục bị xáo trộn trong khi phần cằm di chuyển ra ngoài.

Khô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);
}

Lưu ý quan trọng: Để ngăn tình trạng hồi quy hiệu suất, Chrome sẽ không trượt phần cằm khi bạn cuộn khi phát hiện thấy mẫu này.

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 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 động tự động cập nhật khi cằm di chuyển ra khỏi tầm nhìn, 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 phần tử được neo ở dưới cùng ở phía trước 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 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

Lưu ý: giá trị dự phòng 36px cho safe-area-max-inset-bottom được chọn để phục vụ các trình duyệt không hỗ trợ safe-area-max-inset-bottom. Giá trị này được chọn do Safari trên iOS ở Chế độ thẻ đơn có độ dời dưới cùng tối đa là 36px ở chế độ dọc.

Lưu ý quan trọng: Chrome có các tính năng tối ưu hoá mã – còn gọi là đường dẫn nhanh – khi phát hiện mẫu calc(env(safe-area-inset-bottom, …) +/- …);. Đường dẫn nhanh này cho phép nội dung được neo ở dưới cùng di chuyển cùng với phần cằm một cách hiệu quả trong khi phần cằm di chuyển ra ngoài.

Kết quả hình ảnh giống với 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ỉ giá trị được tính toán cho bottom cần thay đổi khi cằm di chuyển ra xa, nên không có hiện tượng bố cục bị xáo trộn.

Hình minh hoạ một trang web có phần tử được neo ở dưới cùng, có tính đến phần lồng ghép vùng an toàn. Khi cằm hiển thị (bên trái), phần tử này nằm phía trên cằm. Khi không hiển thị phần cằm, phần tử này sẽ tràn vào thanh điều hướng bằng cử chỉ của Android.

Lưu ý: Các phần lồng ghép tối đa trong vùng an toàn (safe-area-max-inset-bottom và các thành phần khác) có trong Chrome 135.

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 phiên bản ổn định công khai, 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 một nửa phần cằm nhằm phân biệt rõ ràng hơn với giao diện người dùng khác)
• DrawCutOutEdgeToEdge
• BottomBrowserControlsRefactor (đừng đặt thành "Enabled" (Đã bật) mà hãy đặt thành "Enabled Dispatch yOffset" (Đã bật Dispatch yOffset))
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• EdgeToEdgeSafeAreaConstraint (đừ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 đây không được bật:

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

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à cách triển khai toàn màn hình, 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 "Giao diện người dùng > Trình duyệt > Di động > EdgeToEdge". Chúng tôi đánh giá cao phản hồi của bạn.