- บนเดสก์ท็อป
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
ยังไม่มีความคิดเห็น