รองรับอุปกรณ์แบบพับได้ด้วย Viewport Segments API

Alexis Menard

เผยแพร่: 9 มิถุนายน 2025

Viewport Segments API ช่วยให้เข้าถึงตำแหน่งและขนาดของ ภูมิภาคที่แยกจากกันอย่างเป็นตรรกะของวิวพอร์ตได้ด้วย JavaScript หรือ CSS และพร้อมใช้งานใน Chrome 138

ระบบจะสร้างกลุ่ม Viewport เมื่อฮาร์ดแวร์อย่างน้อย 1 รายการแบ่ง Viewport เช่น รอยพับหรือบานพับระหว่างจอแสดงผลแยกกัน ซึ่งทำหน้าที่เป็นตัวคั่น

กลุ่มคือส่วนของวิวพอร์ตที่คุณถือว่าแตกต่างกันอย่างมีเหตุผล เมื่อพัฒนาเว็บไซต์หรือแอป API ที่น่าสนใจเหล่านี้ช่วยให้คุณสร้างหรือเพิ่มประสิทธิภาพ อินเทอร์เฟซสำหรับอุปกรณ์พับได้โดยเฉพาะ เช่น การสร้างประสบการณ์ของผู้ใช้แบบ 2 บานหน้าต่าง หรือเพียงแค่หลีกเลี่ยงการวางเนื้อหาที่พับ

ตั้งแต่ช่วงทดลองใช้จากต้นทางที่เราดำเนินการเมื่อปีที่แล้ว มีการเปลี่ยนแปลง 2 อย่างดังนี้

• ตอนนี้แอตทริบิวต์ JavaScript segments อยู่ในออบเจ็กต์ window.viewport ที่เพิ่มใหม่ แทนที่จะอยู่ใน window.visualViewport
• ลักษณะการทำงานของพร็อพเพอร์ตี้ segments เมื่ออุปกรณ์ไม่ได้พับจะสอดคล้องกับลักษณะการทำงานของ CSS ของฟีเจอร์นี้ เมื่ออุปกรณ์ไม่ได้พับ (หรือพับไม่ได้) พร็อพเพอร์ตี้ segments จะมีอาร์เรย์ของส่วนเดียวที่แสดงถึงขนาดวิวพอร์ตทั้งหมด

ดูการสาธิตอุปกรณ์พับได้เพื่อดูการทำงานของ API