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 các đơn vị khung nhìn (tức là vh) sẽ không thay đổi kích thước theo thanh URL đang hiển thị hoặc bị ẩn. Thay vào đó, các đơn vị vh sẽ được đặt 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ể". Điều này có nghĩa là 100vh sẽ lớn hơn
chiều cao hiển thị khi thanh URL hiển thị.
Khối chứa ban đầu (ICB) là khối chứa gốc được dùng khi định kích thước các phần tử so với thành phần mẹ. Ví dụ: việc tạo kiểu width: 100%; height: 100% cho phần tử <html> sẽ làm cho phần tử đó có kích thước giống với ICB. Với thay đổi này, ICB sẽ không thay đổi kích thước khi thanh URL bị ẩn.
Thay vào đó, hình ảnh này 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ị khi thanh URL bị ẩn.
Có một ngoại lệ đối với những thay đổi nêu trên và đó là dành cho các phần tử thuộc position: fixed. Hành vi của họ 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 của URL là 100%, thì hệ thống sẽ luôn lấp đầy chính xác chiều cao hiển thị, bất kể thanh URL có hiển thị hay không. Tương tự như vậy, đối với độ dài
vh, chúng cũng sẽ đổi kích thước để khớ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 sự thay đổi này:
Đơn vị
vhcó thể sử dụng trên thiết bị di động. Trước đó, việc sử dụng đơn vịvhđồng nghĩa với việc một trang sẽ chỉnh lại luồng một cách khó chị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 một trang 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 tăng mức sử dụng bộ xử lý và tiêu hao pin khi 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 hành vi của Safari, giúp các nhà phát triển web làm việc dễ dàng hơn. Lựa chọn phi trực quan khi đặt đơn vị
vhthà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, ICB 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ạ
- Đây là bản minh hoạ.
Bốn thanh ở bên phải trang có thể là 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 cho thấy thanh URL ảnh hưởng như thế nào đến từng thanh URL. 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.