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

Alexis Menard

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

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

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

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

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

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

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