Sử dụng đơn vị viewport trên mobile Source

dùng đến javascript túm 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

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

Chúng ta sẽ túm lấy và định nghĩa --vh bằng javascript

	// Trước tiên lấy viewport height và chuyển thành giá trị 1%
	let vh = window.innerHeight * 0.01;
	// Đặt biến css
	document.documentElement.style.setProperty('--vh', `${vh}px`);

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`);
	});