Chrome กำลังทดลองใช้ API จำนวน 2 รายการ ได้แก่ Device Posture API และ Viewport Audiences Enumeration API ซึ่งมีให้บริการเป็นช่วงทดลองใช้จากต้นทางจาก Chrome 125 ซึ่งเรียกรวมกันว่า API แบบพับได้ซึ่งออกแบบมาเพื่อช่วยนักพัฒนาแอปกำหนดเป้าหมายอุปกรณ์แบบพับได้ โพสต์นี้จะแนะนำ API เหล่านี้และให้ข้อมูลเกี่ยวกับวิธีเริ่มทดสอบ
อุปกรณ์จะมีรูปแบบของอุปกรณ์ที่แตกต่างกัน 2 รูปแบบโดยส่วนใหญ่ ได้แก่ อุปกรณ์ที่มีหน้าจอที่ยืดหยุ่นเพียงหน้าจอเดียว (อย่างราบรื่น) และอุปกรณ์ที่มี 2 หน้าจอ (มีตะเข็บ หรือที่เรียกว่าอุปกรณ์ Dual Screen)
อุปกรณ์เหล่านี้นำเสนอความท้าทายและโอกาสสำหรับนักพัฒนาซอฟต์แวร์ ซึ่งมีวิธีการเพิ่มเติมในการดูเนื้อหา ตัวอย่างเช่น ผู้ใช้อาจถืออุปกรณ์ที่ราบรื่นอย่างเช่นหนังสือ แล้วเปลี่ยนไปใช้อุปกรณ์เหมือนแท็บเล็ตที่มีหน้าจอแบน อุปกรณ์ที่มี 2 หน้าจอจะมีจุดผนวกกันระหว่างหน้าจอที่อาจต้องพิจารณา
โดย API ใหม่เหล่านี้ช่วยให้นักพัฒนาซอฟต์แวร์มีวิธีมอบประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้นสำหรับอุปกรณ์เหล่านี้ โดย API แต่ละรายการจะแสดงข้อมูลพื้นฐานของแพลตฟอร์มเว็บที่จำเป็นแบบ 2 ทาง นั่นคือผ่าน CSS และ JavaScript
API อุปกรณ์
อุปกรณ์แบบพับได้มีความสามารถที่ช่วยให้เปลี่ยนลักษณะ_ท่าทาง_หรือสถานะทางกายภาพของอุปกรณ์ได้ บริษัทสามารถเปลี่ยนรูปแบบของอุปกรณ์เพื่อให้ผู้เขียนเนื้อหามอบประสบการณ์ของผู้ใช้ที่แตกต่างออกไปได้ และ API ใหม่เหล่านี้จะช่วยให้มั่นใจได้ว่าเนื้อหาเว็บจะตอบสนองต่อสถานะการพับแบบต่างๆ ได้
อุปกรณ์มีลักษณะ 2 ระดับดังนี้
folded: ระดับการใช้งานของแล็ปท็อปหรือหนังสือ
continuous: จอแบน แท็บเล็ต หรือแม้กระทั่งจอโค้งที่ราบรื่น
CSS
ข้อกำหนดของ Device Posture API จะกำหนดฟีเจอร์สื่อใหม่ของ CSS ซึ่งก็คือ device-posture ฟีเจอร์สื่อนี้แก้ไขเป็นท่าตายตัว รูปแบบเหล่านี้ประกอบด้วยค่าที่กำหนดไว้ล่วงหน้าจำนวนหนึ่งซึ่งแต่ละค่าครอบคลุมสถานะทางกายภาพของอุปกรณ์
ค่าของฟีเจอร์ device-posture ตรงกับคำอธิบายก่อนหน้าของลักษณะที่เป็นไปได้ ดังนี้
foldedcontinuous
อาจมีการเพิ่มระดับใหม่ในอนาคตหากมีอุปกรณ์ใหม่เข้ามาในตลาด
ตัวอย่าง
/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }
/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }
JavaScript
หากต้องการค้นหาท่าทางของอุปกรณ์ วัตถุ DevicePosture ใหม่ก็จะพร้อมใช้งาน
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
เพื่อตอบสนองต่อการเปลี่ยนแปลงท่าทางของอุปกรณ์ เช่น ผู้ใช้เปิดอุปกรณ์อย่างสมบูรณ์ และดังนั้นจึงย้ายจาก folded ไปยัง continuous ให้สมัครรับข้อมูลเหตุการณ์ change
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
API กลุ่มวิวพอร์ต
กลุ่มวิวพอร์ตคือตัวแปรสภาพแวดล้อม CSS ที่กำหนดตำแหน่งและมิติข้อมูลของพื้นที่ที่แยกกันอย่างสมเหตุสมผลของวิวพอร์ต กลุ่มวิวพอร์ตจะสร้างขึ้นเมื่อมีการแยกวิวพอร์ตด้วยคุณลักษณะของฮาร์ดแวร์อย่างน้อย 1 อย่าง (เช่น แนวพับหรือบานพับระหว่างจอแสดงผลที่แยกจากกัน) ซึ่งทำหน้าที่เป็นเส้นแบ่ง กลุ่มคือเขตของวิวพอร์ตที่ผู้เขียนจะแยกแยะได้ว่ามีความแตกต่างเชิงตรรกะ
CSS
จำนวนของส่วนเชิงตรรกะจะแสดงผ่านฟีเจอร์สื่อใหม่ 2 รายการ ซึ่งกำหนดไว้ในข้อกำหนด CSS Media Query ระดับ 5 นั่นคือ vertical-viewport-segments และ horizontal-viewport-segments แก้ไขเป็นจำนวนกลุ่มที่แบ่งวิวพอร์ตออก
นอกจากนี้ยังมีการเพิ่มตัวแปรสภาพแวดล้อมใหม่ในการค้นหามิติข้อมูลของแผนกเชิงตรรกะแต่ละส่วน ตัวแปรเหล่านี้ได้แก่
env(viewport-segment-width x y)env(viewport-segment-height x y)env(viewport-segment-top x y)env(viewport-segment-left x y)env(viewport-segment-bottom x y)env(viewport-segment-right x y)
ตัวแปรแต่ละรายการมีมิติข้อมูล 2 รายการ ซึ่งจะแสดงตำแหน่ง x และ y ตามลำดับในตาราง 2 มิติที่สร้างโดยคุณลักษณะของฮาร์ดแวร์ที่แยกกลุ่มต่างๆ
ข้อมูลโค้ดต่อไปนี้เป็นตัวอย่างง่ายๆ ของการสร้าง UX แบบแยก ซึ่งเรามีส่วนเนื้อหา 2 ส่วน (col1 และ col2) ในแต่ละฝั่งของส่วนพับ
<style>
/* Segments are laid out horizontally. */
@media (horizontal-viewport-segments: 2) {
#segment-css-container {
flex-direction: row;
}
#col1 {
display: flex;
flex: 0 0 env(viewport-segment-right 0 0);
background-color: steelblue;
}
#fold {
width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
background-color: black;
height: 100%;
}
#col2 {
display: flex;
background-color: green;
}
}
/* Segments are laid out vertically. */
@media (vertical-viewport-segments: 2) {
#segment-css-container {
flex-direction: column;
}
#col1 {
display: flex;
flex: 0 0 env(viewport-segment-bottom 0 0);
background-color: pink;
}
#fold {
width: 100%;
height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
background-color: black;
}
#col2 {
display: flex;
background-color: seagreen;
}
}
</style>
<div id="segment-css-container">
<div id="col1"></div>
<div id="fold"></div>
<div id="col2"></div>
</div>
รูปภาพต่อไปนี้จะแสดงลักษณะของประสบการณ์การใช้งานบนอุปกรณ์จริง
JavaScript
หากต้องการดูจำนวนกลุ่มวิวพอร์ต ให้ตรวจสอบรายการ segments ใน visualViewport
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
แต่ละรายการในอาร์เรย์ segments แสดงกลุ่มเชิงตรรกะแต่ละกลุ่มของวิวพอร์ต โดยมี DOMArray อธิบายพิกัดและขนาด ช่อง segments คือสแนปชอตของสถานะที่ระบุเมื่อค้นหา คุณต้องฟังการเปลี่ยนแปลงท่าทางหรือปรับขนาดเหตุการณ์และค้นหาพร็อพเพอร์ตี้ segments อีกครั้งเพื่อรับค่าที่อัปเดต
ลองใช้ API แบบพับได้
API แบบพับได้มีให้ใช้งานในช่วงทดลองใช้จากต้นทางตั้งแต่ Chrome 125 ถึง Chrome 128 ดูข้อมูลเบื้องหลังเกี่ยวกับช่วงทดลองใช้จากต้นทางได้ที่เริ่มต้นใช้งานช่วงทดลองใช้จากต้นทาง
สำหรับการทดสอบในพื้นที่ คุณจะเปิดใช้ API แบบพับได้พร้อมแฟล็กฟีเจอร์แพลตฟอร์มเว็บแบบทดลองที่ chrome://flags/#enable-experimental-web-platform-features ซึ่งยังเปิดใช้ได้โดยเรียกใช้ Chrome จากบรรทัดคำสั่งด้วย --enable-experimental-web-platform-features
เดโม
หากต้องการดูการสาธิต โปรดดูที่เก็บการสาธิต หากคุณไม่มีอุปกรณ์จริงที่จะทดสอบ คุณสามารถเลือกอุปกรณ์จำลอง Galaxy Z Fold 5 หรือ Asus Zenbook Fold ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และสลับระหว่าง Galaxy Z Fold 5 หรือ Folded นอกจากนี้คุณยังแสดงภาพบานพับได้ หากมี
