หน่วย Viewport ใหม่ของ CSS: `svh`, `lvh`, `dvh`

• การตั้งค่าตามความกว้าง/ความสูงของ viewport นั้นสะดวก แต่ vh มีบั๊กบนมือถือค่อนข้างมาก
  → เพราะขนาด viewport ไม่รวม UI แถบที่อยู่ของเบราว์เซอร์
• 100vh ควรจะมีความสูงเท่ากับ viewport ทั้งหมดบนมือถือ แต่จะเกิดปัญหาใน Safari/Chrome (Android) ที่ซ่อน UI ระหว่างการเลื่อน
• ดังนั้น CSS Working Group จึงได้แนะนำหน่วยใหม่ svh, lvh, dvh
  • svh Small Viewport: ความสูงของ viewport ในสถานะที่ UI แถบที่อยู่ยังไม่ย่อ
  • lvh Large Viewport: ความสูงของ viewport ในสถานะที่ UI แถบที่อยู่ถูกย่อแล้ว
  • dvh Dynamic Viewport: เปลี่ยนแปลงแบบไดนามิกระหว่าง svh / lvh
• ใช้ 100dvh เพื่อกำหนดให้ปุ่มด้านล่างสุดแสดงอยู่เสมอได้
  • แต่ควรระวัง เพราะอาจมีปัญหาด้านประสิทธิภาพ

[hided62]

ว้าว! บน Firefox for Android ตอนใช้ position:fixed, bottom: 0 มันเคยมีอาการทำงานแปลกแบบน่ากลัวอยู่หลายอย่าง หวังว่าคงต้องลองเช็กดูว่าแก้ได้แล้วหรือเปล่านะครับ

[tobyyun]

https://caniuse.com/viewport-unit-variants
iOS รองรับตั้งแต่ 15.4 และ Android รองรับตั้งแต่ 114 ครับ

[tomriddle7]

มีหน่วย Viewport Unit มากเกินไปจนเริ่มสับสนแล้วนะ

[carnoxen]

เป็นเรื่องน่าขันที่ปัญหานี้ควรเป็นความรับผิดชอบของเบราว์เซอร์ แต่กลับกลายเป็นว่ากลุ่มมาตรฐานต้องมารับผิดชอบ...