Đơn vị viewport CSS mới: `svh`, `lvh`, `dvh`

 (ishadeed.com)
21 điểm bởi xguru 2023-07-14 | 4 bình luận | Chia sẻ qua WhatsApp
  • Việc thiết lập dựa trên chiều rộng/chiều cao viewport rất tiện, nhưng vh có nhiều lỗi trên di động
    → vì kích thước viewport không bao gồm UI thanh địa chỉ của trình duyệt
  • 100vh lẽ ra phải bằng toàn bộ chiều cao viewport trên di động, nhưng lại phát sinh vấn đề trên Safari/Chrome (Android) khi cuộn để ẩn UI
  • Vì vậy, nhóm công tác CSS đã giới thiệu các đơn vị mới: svh, lvh, dvh
    • svh Small Viewport: chiều cao viewport khi UI thanh địa chỉ chưa thu gọn
    • lvh Large Viewport: chiều cao viewport khi UI thanh địa chỉ đã thu gọn
    • dvh Dynamic Viewport: thay đổi động giữa svh / lvh
  • Dùng 100dvh có thể thiết lập để nút ở dưới cùng luôn hiển thị
    • Tuy nhiên cần cẩn thận vì có thể có vấn đề về hiệu năng

Bài viết liên quan

4 bình luận

 
hided62 2023-07-19

Wow! Trên Firefox for Android, từng có những thứ hoạt động kỳ quặc đến mức khủng khiếp khi dùng position:fixed, bottom: 0; chắc phải kiểm tra xem liệu chuyện này có được giải quyết không.
 
tobyyun 2023-07-14

https://caniuse.com/viewport-unit-variants
iOS hỗ trợ từ 15.4, Android hỗ trợ từ 114.
 
tomriddle7 2023-07-14

Nhiều đơn vị Viewport quá nên bắt đầu thấy rối rồi.
 
carnoxen 2023-07-14

Thật trớ trêu khi đây là vấn đề mà trình duyệt lẽ ra phải chịu trách nhiệm, nhưng lại do nhóm tiêu chuẩn gánh lấy...