ช่วงทดลองใช้จากต้นทางสำหรับ API แบบพับได้

Alexis Menard
Alexis Menard
X GitHub
Thomas Steiner

Chrome กําลังทดลองใช้ API 2 รายการ ได้แก่ Device Posture API และ Viewport Segments enumeration API ซึ่งพร้อมใช้งานเป็นช่วงทดลองใช้จากต้นทางใน Chrome 125 ซึ่งเรียกรวมกันว่า Foldable API ที่ออกแบบมาเพื่อช่วยนักพัฒนาแอปกำหนดเป้าหมายไปยังอุปกรณ์แบบพับได้ โพสต์นี้จะแนะนำ API เหล่านี้และบอกวิธีเริ่มทดสอบ

อุปกรณ์มีรูปแบบหลักๆ 2 แบบ ได้แก่ อุปกรณ์ที่มีหน้าจอแบบยืดหยุ่นหน้าจอเดียว (ไร้รอยต่อ) และอุปกรณ์ที่มี 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 ตรงกับคำอธิบายท่าทางที่เป็นไปได้ก่อนหน้านี้ ดังนี้

  • folded
  • continuous

อาจมีการเพิ่มท่าทางใหม่ในอนาคตหากมีอุปกรณ์ใหม่ออกสู่ตลาด

ตัวอย่าง

/* 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 มิติที่สร้างขึ้นโดยฟีเจอร์ฮาร์ดแวร์ซึ่งแยกกลุ่ม

แผนภาพแสดงกลุ่มแนวนอนและแนวตั้ง ส่วนแนวนอนแรกคือ x 0 และ y 0 ส่วนที่สองคือ x 1 และ y 0 ส่วนแนวตั้งแรกคือ x 0 และ y 0 ส่วนที่สองคือ x 0 และ y 1
ส่วนของแนวนอนแรกคือ x 0 และ y 0 ส่วนที่สองคือ x 1 และ y 0 ส่วนแนวตั้งแรกคือ x 0 และ y 0 ส่วนที่สองคือ x 0 และ y 1

ข้อมูลโค้ดต่อไปนี้เป็นตัวอย่างที่เข้าใจง่ายของการสร้าง 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 แล้วสลับระหว่างแบบต่อเนื่องกับแบบพับ นอกจากนี้ คุณยังดูภาพจำลองของบานพับได้ด้วยหากมี

เครื่องมือสำหรับนักพัฒนาเว็บของ Chrome จำลองอุปกรณ์แบบพับได้