หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Alexis Menard

Thomas Steiner

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

โดยมีรูปแบบของอุปกรณ์จริง 2 แบบด้วยกันเป็นหลัก ได้แก่ อุปกรณ์ที่มีหน้าจอยืดหยุ่นเพียงหน้าจอเดียว (ราบรื่น) และอุปกรณ์ที่มี 2 หน้าจอ (มีรอยต่อ หรือเรียกอีกอย่างว่าอุปกรณ์ Dual Screen)

ภาพวาดแบบสคีมาของอุปกรณ์ที่มีหน้าจอที่ยืดหยุ่นเพียงหน้าจอเดียว (ราบรื่น) ทางด้านซ้าย และอุปกรณ์ที่มี 2 หน้าจอ (มีรอยต่อหรือที่เรียกว่าหน้าจอคู่) อยู่ทางด้านขวา

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

API ใหม่เหล่านี้ช่วยให้นักพัฒนาแอปมอบประสบการณ์การใช้งานที่ดียิ่งขึ้นสำหรับอุปกรณ์เหล่านี้ให้แก่นักพัฒนาแอปได้ แต่ละ API แสดงข้อมูลพื้นฐานของแพลตฟอร์มเว็บที่จำเป็นใน 2 ทางผ่าน CSS และ JavaScript

API ระดับอุปกรณ์

อุปกรณ์แบบพับได้มีความสามารถในการเปลี่ยนระดับ_ระดับ_หรือสถานะทางกายภาพของอุปกรณ์ได้ ผู้ใช้สามารถเปลี่ยนรูปแบบของอุปกรณ์เพื่อให้ผู้เขียนเนื้อหามอบประสบการณ์ของผู้ใช้ที่แตกต่างออกไป และ API ใหม่เหล่านี้ก็ช่วยให้เนื้อหาเว็บตอบสนองต่อสถานะการพับลักษณะต่างๆ ได้

อุปกรณ์สามารถมีลักษณะการทำงานได้ 2 ลักษณะ ได้แก่

folded: แล็ปท็อปหรือการวางท่า

การวาดภาพแบบแผนของอุปกรณ์ในแนวราบหรือแบบแท็บเล็ต และการแสดงผลโค้งแบบไร้รอยต่อ

continuous: หน้าจอแบน แท็บเล็ต หรือแม้แต่หน้าจอโค้งแบบไร้รอยต่อ

การวาดภาพแบบแผนของอุปกรณ์ในแล็ปท็อปหรือท่าทางหนังสือ

CSS

ข้อกำหนด Device Posture API กำหนด CSS media-feature ใหม่ ซึ่งก็คือ 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}`);
});

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 ส่วนที่ 2 x 1 และ y 0 ส่วนแนวตั้งแรกคือ x 0 และ y 0 ส่วนที่ 2 x 0 และ y 1 — ส่วนแรกในแนวนอนคือ x 0 และ y 0, x ที่ 2 x 1 และ y 0 ส่วนแนวตั้งแรกคือ x 0 และ y 0 ส่วนที่ 2 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 อีกครั้ง

ลองใช้ API แบบพับได้

API แบบพับได้พร้อมใช้งานในช่วงทดลองใช้จากต้นทางจาก Chrome 125 ถึง Chrome 128 ดูข้อมูลเบื้องต้นเกี่ยวกับช่วงทดลองใช้จากต้นทางได้ที่เริ่มต้นใช้งานช่วงทดลองใช้จากต้นทาง

สำหรับการทดสอบในเครื่อง คุณเปิดใช้ API แบบ Foldable ได้ด้วยแฟล็กของฟีเจอร์แพลตฟอร์มเว็บแบบทดลองที่ chrome://flags/#enable-experimental-web-platform-features นอกจากนี้ คุณยังเปิดใช้ Chrome จากบรรทัดคำสั่งด้วย --enable-experimental-web-platform-features ได้ด้วย

เดโม

โปรดดูการสาธิตที่ที่เก็บการสาธิต หากไม่มีอุปกรณ์จริงที่จะทดสอบ คุณสามารถเลือกอุปกรณ์จำลอง Galaxy Z Fold 5 หรือ AsusZenbook Fold ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และสลับระหว่าง แบบต่อเนื่องกับแบบพับได้ และยังแสดงภาพบานพับได้ด้วย

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

ลิงก์ที่เกี่ยวข้อง

API ระดับอุปกรณ์
API กลุ่มของวิวพอร์ต