Chrome กําลังทดลองใช้ API 2 รายการ ได้แก่ Device Posture API และ Viewport Segments enumeration API ซึ่งพร้อมใช้งานเป็นช่วงทดลองใช้จากต้นทางใน Chrome 125 ซึ่งเรียกรวมกันว่า Foldable API ที่ออกแบบมาเพื่อช่วยนักพัฒนาแอปกำหนดเป้าหมายไปยังอุปกรณ์แบบพับได้ โพสต์นี้จะแนะนำ API เหล่านี้และบอกวิธีเริ่มทดสอบ
อุปกรณ์มีรูปแบบหลักๆ 2 แบบ ได้แก่ อุปกรณ์ที่มีหน้าจอแบบยืดหยุ่นหน้าจอเดียว (ไร้รอยต่อ) และอุปกรณ์ที่มี 2 หน้าจอ (มีรอยต่อ หรือที่เรียกว่าอุปกรณ์แบบ 2 หน้าจอ)
อุปกรณ์เหล่านี้มีทั้งความท้าทายและโอกาสสําหรับนักพัฒนาแอป วิดีโอเหล่านี้เป็นช่องทางเพิ่มเติมในการรับชมเนื้อหา เช่น ผู้ใช้อาจถืออุปกรณ์แบบไร้รอยต่อเหมือนหนังสือ แล้วเปลี่ยนเป็นการใช้อุปกรณ์แบบแท็บเล็ตที่มีหน้าจอแบน อุปกรณ์ที่มี 2 หน้าจอมีการต่อเชื่อมระหว่างหน้าจอจริงที่อาจต้องพิจารณา
API ใหม่เหล่านี้ช่วยให้นักพัฒนาแอปมอบประสบการณ์การใช้งานที่ดีขึ้นให้แก่ผู้ใช้อุปกรณ์เหล่านี้ API แต่ละรายการจะแสดงรายการพื้นฐานของแพลตฟอร์มเว็บที่จำเป็น 2 วิธี ได้แก่ ผ่าน CSS และ JavaScript
Device Posture 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}`);
});
Viewport Segments API
ส่วนวิวพอร์ตคือตัวแปรสภาพแวดล้อม CSS ที่กำหนดตำแหน่งและขนาดของภูมิภาคที่แยกกันตามตรรกะของวิวพอร์ต ระบบจะสร้างกลุ่มวิวพอร์ตเมื่อวิวพอร์ตถูกแยกด้วยฟีเจอร์ฮาร์ดแวร์อย่างน้อย 1 รายการ (เช่น การพับหรือบานพับระหว่างจอแสดงผลแยกต่างหาก) ที่ทำหน้าที่เป็นตัวแบ่ง ส่วนคือภูมิภาคของวิวพอร์ตที่ผู้เขียนสามารถถือว่ามีความแตกต่างตามตรรกะ
CSS
จำนวนการแบ่งแบบตรรกะจะแสดงผ่านฟีเจอร์สื่อใหม่ 2 รายการ ซึ่งกำหนดไว้ในข้อกำหนดของคิวรีสื่อ CSS ระดับ 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 อีกครั้ง
ลองใช้ Foldable API
Foldable API พร้อมใช้งานในช่วงทดลองใช้จากต้นทางตั้งแต่ Chrome 125 ถึง Chrome 128 ดูข้อมูลเบื้องต้นเกี่ยวกับการทดลองใช้ต้นทางได้ที่หัวข้อเริ่มต้นใช้งานการทดลองใช้ต้นทาง
สําหรับการทดสอบในเครื่อง คุณสามารถเปิดใช้ Foldable API ได้ด้วยการตั้งค่า Flag ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลองที่ chrome://flags/#enable-experimental-web-platform-features นอกจากนี้ คุณยังเปิดใช้ได้โดยเรียกใช้ Chrome จากบรรทัดคำสั่งด้วย --enable-experimental-web-platform-features
เดโม
ดูเดโมได้ที่ที่เก็บ demos หากไม่มีอุปกรณ์จริงสำหรับทดสอบ คุณสามารถเลือกอุปกรณ์จำลอง Galaxy Z Fold 5 หรือ Asus Zenbook Fold ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แล้วสลับระหว่างแบบต่อเนื่องกับแบบพับ นอกจากนี้ คุณยังดูภาพจำลองของบานพับได้ด้วยหากมี
ลิงก์ที่เกี่ยวข้อง
- Device Posture API
- Viewport Segments API