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:
Chiều dài được xác định trong đơn vị khung nhìn (tức là vh) sẽ không thay đổi kích thước để phản hồi việc thanh URL hiển thị hoặc ẩn. Thay vào đó, các đơn vị vh sẽ được định cỡ theo chiều cao khung nhìn như thể thanh URL luôn bị ẩn. Tức là các đơn vị vh sẽ được định kích thước theo "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 cỡ các phần tử so với phần tử mẹ. Ví dụ: việc đặt kiểu width: 100%; height: 100% cho phần tử <html> sẽ giúp phần tử này 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 đó, chiều cao của khung hiển thị sẽ giữ nguyên, như thể thanh URL luôn hiển thị
("chế độ xem nhỏ nhất có thể"). Điều này có nghĩa là một Phần tử có kích thước theo chiều cao của 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 các thay đổi nêu trên, đó là đối với các phần tử là position: fixed. Hành vi của chúng vẫn không thay đổi. Tức là phần tử position:
fixed có khối chứa là ICB sẽ đổi kích thước để phản hồi việc thanh URL hiển thị hoặc ẩn. Ví dụ: nếu chiều cao của thanh là 100%, thì thanh 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ư vậy đối với chiều dài vh, các chiều dài này 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.
Có một vài lý do dẫn đến sự thay đổi này:
Các đơn vị
vhcó thể sử dụng trên thiết bị di động. Trước đó, việc sử dụng các đơn vịvhcó nghĩa là trang sẽ chảy lại 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ảy lại 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 để bố trí 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 phải khớp với cách Safari hoạt động, giúp nhà phát triển web dễ dàng hơn. Lựa chọn không trực quan là đặt các đơn vị
vhthành khung nhìn lớn nhất có thể nhưng ICB nhỏ nhất có thể để khớ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 nhất quán 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à một 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 URL. Các sự kiện đổi kích thước được in xuống trang.
Hỗ trợ
- Chrome 56 trên Android.