การใช้หน่วย Viewport แบบไดนามิก

• บนเดสก์ท็อป vw, vh แสดงขนาดของ viewport ได้อย่างแม่นยำ
• บนอุปกรณ์มือถือ ขนาดจะได้รับผลกระทบจาก UI ที่ปรากฏแบบไดนามิก เช่น toolbar และแถบที่อยู่ ดังนั้น 100vh อาจใหญ่เกินขนาด viewport หรือเมื่อแถบที่อยู่หดตัวจากการเลื่อน ก็อาจกลับมาพอดีกับขนาด viewport
• CSS Working Group จึงได้เพิ่มหน่วยที่สามารถใช้ให้สอดคล้องกับขนาดที่เปลี่ยนแปลงแบบไดนามิกเหล่านี้ เพื่อให้ได้ขนาดที่ตรงกับ viewport จริง
  • Large viewport: lvh คือกรณีที่ไม่มี UI แบบไดนามิกแสดงอยู่
  • Small viewport: svh คือกรณีที่ UI ที่หดอยู่ขยายกลับขึ้นมาอีกครั้ง
  • Dynamic viewport: dvh จะมีขนาดเท่ากับ viewport ตามสถานะของ UI แบบไดนามิก รองรับใน Chrome 108, Firefox 101, Safari 15.4