Chrome กำลังทดลองใช้ API จำนวน 2 รายการ ได้แก่ Device Posture API และกลุ่มของวิวพอร์ต Enumeration API ซึ่งมีให้บริการเป็นช่วงทดลองใช้จากต้นทางจาก Chrome 125. ซึ่งเรียกรวมกันว่า API แบบพับได้ซึ่งออกแบบมาเพื่อช่วย อุปกรณ์แบบพับได้ โพสต์นี้จะแนะนำ API เหล่านี้และ จะให้ข้อมูลเกี่ยวกับวิธีเริ่มทดสอบ
อุปกรณ์มีลักษณะทางกายภาพที่แตกต่างกัน 2 รูปแบบโดยส่วนใหญ่ ได้แก่ อุปกรณ์ที่มีองค์ประกอบเดียว หน้าจอที่ยืดหยุ่น (ไม่มีรอยต่อ) และอุปกรณ์ที่มี 2 หน้าจอ (แบบมีรอยต่อ) อุปกรณ์หน้าจอคู่)
อุปกรณ์เหล่านี้นำเสนอความท้าทายและโอกาสสำหรับนักพัฒนาซอฟต์แวร์ ซึ่งมี วิธีการเพิ่มเติมในการดูเนื้อหา ตัวอย่างเช่น ผู้ใช้อาจระงับ อุปกรณ์ที่ไร้รอยต่อ เช่น หนังสือ แล้วเปลี่ยนไปใช้อุปกรณ์อย่างแท็บเล็ต จอแบน อุปกรณ์ที่มี 2 หน้าจอมีจุดเชื่อมต่อระหว่างหน้าจอ ที่ต้องนำมาพิจารณา
API ใหม่เหล่านี้ช่วยให้นักพัฒนาแอปสามารถมอบประสบการณ์ที่ดียิ่งขึ้นแก่ผู้ใช้ได้ สำหรับอุปกรณ์เหล่านี้ API แต่ละรายการจะแสดง Primitive ของแพลตฟอร์มเว็บที่จำเป็นใน ผ่านทาง CSS และ JavaScript
API อุปกรณ์
อุปกรณ์แบบพับได้มีความสามารถที่ช่วยให้เปลี่ยนท่าทาง_ หรือ สถานะทางกายภาพของอุปกรณ์ สามารถเปลี่ยนรูปแบบของอุปกรณ์ ผู้เขียนเนื้อหาเพื่อให้ประสบการณ์ของผู้ใช้ที่แตกต่างออกไป และ API ใหม่เหล่านี้ทำให้ ตรวจสอบให้แน่ใจว่าเนื้อหาเว็บตอบสนองต่อสถานะพับต่างๆ ได้
อุปกรณ์มีลักษณะ 2 ระดับดังนี้
folded: ระดับการใช้งานของแล็ปท็อปหรือหนังสือ
continuous: จอแบน แท็บเล็ต หรือแม้กระทั่งจอโค้งที่ราบรื่น
CSS
ข้อกำหนดของ Device Posture API จะกำหนด CSS ใหม่ ฟีเจอร์สื่อ - ท่าทางของอุปกรณ์ ฟีเจอร์สื่อนี้แก้ไขเป็นท่าตายตัว ท่าเหล่านี้ประกอบด้วย ค่าที่กำหนดไว้ล่วงหน้าจำนวนหนึ่งซึ่งแต่ละค่าครอบคลุมสถานะทางกายภาพของ อุปกรณ์
ค่าของฟีเจอร์ 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 ส่วน (คอลัมน์ 1 และ 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 DevTools และสลับไปมาระหว่าง ต่อเนื่องและพับ คุณสามารถดูรูปบานพับได้เมื่อ ที่เกี่ยวข้อง
ลิงก์ที่เกี่ยวข้อง
- API ลักษณะการทำงานของอุปกรณ์
- API กลุ่มของวิวพอร์ต