100dvh ต่างจาก 100vh อย่างไร
100dvh (Dynamic Viewport Height) ต่างจาก 100vh ตรงที่มันรู้จัก UI ของ browser บนมือถือครับ
ปัญหาของ 100vh บนมือถือคือ browser คำนวณ viewport จาก ความสูงสูงสุด (ตอน address bar ซ่อนอยู่) แต่ address bar จริงๆ มักโผล่อยู่ ทำให้ content ถูกตัดด้านล่าง
สรุปความแตกต่างสั้นๆ
100vh |
100dvh |
|
|---|---|---|
| คำนวณจาก | viewport สูงสุด (เสมือน address bar ซ่อน) | viewport จริง ณ ขณะนั้น (หักลบ browser UI) |
| address bar โผล่ | content ถูกตัด | content พอดี |
| browser support | ทุก browser | Chrome 108+, Safari 15.4+, Firefox 101+ |
นอกจากนี้ยังมี unit ที่เกี่ยวข้องในกลุ่มเดียวกัน คือ svh (Small Viewport Height — ตอน UI แสดงอยู่) และ lvh (Large Viewport Height — ตอน UI ซ่อน) ซึ่ง dvh นั้น dynamic คือปรับตามสถานะจริงตลอดเวลา
สำหรับ Hero Section แนะนำให้ใช้แบบนี้ครับ
.hero {
/* fallback สำหรับ browser เก่า */
min-height: 100vh;
min-height: 100dvh;
}