HomeOur Team
Sử dụng đơn vị viewport trên mobile
Tips / Tricks
Sử dụng đơn vị viewport trên mobile
thuc.nguyen
thuc.nguyen
February 21, 2021
2 min

Các đơn vị viewport luôn gây tranh cãi và một số điều đó là do trình duyệt di động đã làm cho mọi thứ trở nên phức tạp hơn bằng cách đưa ra ý kiến ​​riêng của họ về cách triển khai chúng.

Cách tính viewport. Với thiết bị di động, chúng t thường quan tâm đến chiều cao thẳng đứng, vì vậy hãy xem xét cụ thể chiều cao khung nhìn (vh):

vh unit

Equal to 1% of the height of the initial containing block. (1vh = 1% độ cao khởi tạo của khu vực trình duyệt dùng để hiển thị trang web.)

vh ban đầu được tính toán bởi khung nhìn hiện tại của trình duyệt của bạn. Nếu bạn đã mở trình duyệt và bắt đầu tải một trang web, 1vh bằng 1% chiều cao màn hình của bạn, trừ đi giao diện trình duyệt.

Nhưng nếu bạn bắt đầu cuộn, đó là một câu chuyện khác. Khi bạn vượt qua một phần của giao diện trình duyệt, chẳng hạn như thanh địa chỉ, giá trị vh sẽ cập nhật và kết quả là nội dung có một bước nhảy khó kiểm soát chiều cao.

Nghĩa là giá trị này không bao gồm các phần khác của trình duyệt, như thanh address, thanh bookmark (nếu có), tab bar, … và những thứ khác mà user có thể add thêm vào trình duyệt của họ.

Note: Safari cho iOS là một trong những trình duyệt di động đầu tiên cập nhật cách triển khai của chúng bằng cách chọn xác định giá trị cố định cho vh dựa trên chiều cao tối đa của màn hình. Bằng cách làm như vậy, người dùng sẽ không gặp phải hiện tượng nhảy trang khi thanh địa chỉ bị khuất dạng. Trình duyệt dành cho thiết bị di động của Chrome đã làm theo cách đây khoảng một năm.

Mặc dù sử dụng một giá trị cố định là tốt, nhưng điều đó cũng có nghĩa là bạn không thể có phần tử chiều cao đầy đủ nếu thanh địa chỉ đang ở chế độ xem. Phần dưới cùng của phần tử của bạn sẽ bị cắt.

An element gets cropped at the bottom when the address bar is in view (left) but what we want is the full thing (right).
An element gets cropped at the bottom when the address bar is in view (left) but what we want is the full thing (right).

Một phần tử bị cắt ở dưới cùng khi thanh địa chỉ ở chế độ xem (trái), nhưng những gì chúng ta muốn là hiển thị toàn bộ (phải).

Để khắc phục nhược điểm này. Chúng ta không thể fix bằng css, phải dùng đến javascript lấy độ cao window.innerHeight, lưu giá trị đó lại thành một biến CSS và sử dụng nó thay cho đơn vị vh.

Giả sử biến tùy chỉnh CSS là —vh cho ví dụ này. Điều đó có nghĩa là sẽ muốn áp dụng nó trong CSS của mình như sau:

.my-element {
  height: 100vh; /* fallback khi trình duyệt không hỗ trợ biến css */
  height: calc(var(--vh, 1vh) * 100);
}

Bây giờ, hãy lấy chiều cao bên trong của viewport trong JavaScript:

// Trước tiên lấy viewport height và chuyển thành giá trị 1%
let vh = window.innerHeight * 0.01;

// Sau đó, chúng tôi đặt giá trị trong thuộc tính tùy chỉnh --vh
document.documentElement.style.setProperty('--vh', `${vh}px`);

Chúng ta đã dùng JavaScript lấy chiều cao của viewport và sau đó giảm nó xuống 1/100 trong tổng số đó để có một giá trị để gán làm giá trị đơn vị chiều cao Sau đó, dùng JS tạo biến CSS (—vh) tại: root.

Do đó, bây giờ chúng ta có thể sử dụng —vh làm giá trị chiều cao giống như chúng ta sử dụng bất kỳ đơn vị vh nào khác, nhân nó với 100 và chúng ta có chiều cao đầy đủ mà chúng ta muốn.

Còn một vấn đề nhỏ còn lại cần phải xử lý là cập nhập lại giá trị này khi trình duyệt thay đổi kích thước (xoay trái, xoay phải, xoay ngang, xoay dọc)

// chạy lại khi window resize
window.addEventListener('resize', () => {
  // làm tương tự 2 bước đã làm
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

Tài liệu tham khảo: https://css-tricks.com/


Tags

cssviewport202102
thuc.nguyen

thuc.nguyen

Developer

Related Posts

Những công cụ hỗ trợ cho việc so sánh source code
Những công cụ hỗ trợ cho việc so sánh source code
February 22, 2021
4 min
Sử dụng Postman trong việc test API
Testing
Sử dụng Postman trong việc test API
February 22, 2021
6 min
© 2021, All Rights Reserved.

Quick Links

HomeOur Team

Social Media