Hành vi đổi kích thước của thanh URL sẽ thay đổi trong Chrome trên Android kể từ phiên bản 56. Sau đây là những điều bạn cần biết:
Độ dài được xác định trong đơn vị khung nhìn (tức là vh) sẽ không đổi kích thước theo thanh URL đang hiện hoặc ẩn. Thay vào đó, các đơn vị vh sẽ có kích thước theo chiều cao của khung nhìn như thể thanh URL luôn bị ẩn. Tức là các đơn vị vh sẽ có kích thước "khung nhìn lớn nhất có thể". Tức là 100vh sẽ lớn hơn chiều cao hiển thị khi thanh URL xuất hiện.
Khối chứa ban đầu (ICB) là khối chứa gốc được sử dụng khi định kích thước các phần tử tương ứng với phần tử mẹ. Ví dụ: việc gán kiểu cho phần tử <html> là width: 100%; height: 100% sẽ có cùng kích thước với ICB. Với thay đổi này, ICB sẽ không đổi kích thước khi thanh URL bị ẩn.
Thay vào đó, hình ảnh sẽ vẫn giữ nguyên chiều cao, như thể thanh URL luôn hiển thị ("khung nhìn nhỏ nhất có thể"). Điều này có nghĩa là một Phần tử có kích thước bằng chiều cao ICB sẽ không lấp đầy hoàn toàn chiều cao hiển thị trong khi thanh URL bị ẩn.
Có một trường hợp ngoại lệ đối với những thay đổi ở trên và đó là đối với các phần tử thuộc loại position: fixed. Hành vi của chúng vẫn không thay đổi. Tức là một phần tử position:
fixed có khối chứa là ICB sẽ đổi kích thước để phản hồi thanh URL hiện hoặc ẩn. Ví dụ: nếu chiều cao là 100%, thì chiều cao này sẽ luôn lấp đầy chính xác chiều cao hiển thị, cho dù thanh URL có hiển thị hay không. Tương tự như độ dài vh, các giá trị này cũng sẽ đổi kích thước để phù hợp với chiều cao hiển thị, có tính đến vị trí thanh URL.
Dưới đây là một vài lý do dẫn đến thay đổi này:
Các đơn vị
vhcó thể sử dụng được trên thiết bị di động. Trước đây, việc sử dụng các đơn vịvhcó nghĩa là trang sẽ chỉnh lại luồng một cách khó hiểu mỗi khi người dùng thay đổi hướng cuộn.Cải thiện trải nghiệm người dùng. Nếu trang được chỉnh lại luồng trong khi người dùng đang đọc, họ có thể mất vị trí tương đối trong tài liệu. Điều này gây khó chịu nhưng cũng làm tiêu hao thêm bộ xử lý và tiêu hao pin để bố cục lại và vẽ lại trang.
Cải thiện khả năng tương tác với Safari trên iOS. Mô hình mới sẽ phù hợp với cách hoạt động của Safari, giúp các nhà phát triển web sử dụng dễ dàng hơn. Lựa chọn khó tin là khiến đơn vị
vhtrở thành khung nhìn lớn nhất có thể nhưng ICB nhỏ nhất có thể là để phù hợp với hành vi của Safari.
Đối với các trường hợp toàn màn hình, trong đó thanh URL bị khoá ở trạng thái ẩn, ICC sẽ sử dụng chiều cao toàn màn hình. Điều này phù hợp với các định nghĩa ở trên vì "khung nhìn nhỏ nhất có thể" sẽ là khung nhìn đầy đủ vì thanh URL không hiển thị khi cuộn.
Bản minh hoạ
- Sau đây là bản minh hoạ.
Bốn thanh ở bên phải trang là tất cả các tổ hợp có thể có của
99%,99vh,position:fixedvàposition:absoluteđược cung cấp trên một trang có thể cuộn. Việc ẩn thanh URL sẽ cho thấy mức độ ảnh hưởng của thanh này đến từng đơn vị quảng cáo. Các sự kiện đổi kích thước sẽ được in xuống dưới trang.
Hỗ trợ
- Chrome 56 trên Android.