Uji coba origin untuk Foldable API

Alexis Menard
Alexis Menard
X GitHub
Thomas Steiner

Chrome sedang menguji coba dua API, yaitu Device Posture API dan Segmen Area Pandang Enumeration API, yang tersedia sebagai uji coba origin dari Chrome 125. Secara kolektif, API ini dikenal sebagai Foldable API, yang dirancang untuk membantu developer menargetkan perangkat foldable. Postingan ini memperkenalkan API ini, dan memberikan informasi tentang cara mulai mengujinya.

Secara umum ada dua faktor bentuk fisik yang berbeda: perangkat dengan satu layar fleksibel (mulus), dan perangkat dengan dua layar (dengan sambungan, juga dikenal sebagai perangkat dua layar).

Gambar skema perangkat dengan satu layar fleksibel (mulus) di sebelah kiri, dan perangkat dengan dua layar (dengan sambungan, juga dikenal sebagai dual screen) di sebelah kanan.

Perangkat ini memberikan tantangan dan peluang bagi para developer. Keduanya menyediakan cara lain agar konten dapat dilihat. Misalnya, seorang pengguna mungkin memegang perangkat yang mulus seperti buku dan kemudian beralih menggunakannya seperti tablet dengan layar datar. Perangkat dengan dua layar memiliki gabungan fisik di antara layar-layar yang mungkin perlu diperhitungkan.

API baru ini memberikan cara bagi developer untuk memberikan pengalaman pengguna yang lebih baik untuk perangkat ini. Setiap API mengekspos primitif platform web yang diperlukan dalam dua melalui CSS dan JavaScript.

API Posture Perangkat

Perangkat foldable memiliki kemampuan yang memungkinkannya mengubah_ postur_, atau kondisi fisik perangkat. Mereka dapat mengubah {i> form factor<i} mereka yang memungkinkan penulis konten untuk menyediakan pengalaman pengguna yang berbeda, dan API baru ini membuat memastikan konten web dapat bereaksi terhadap berbagai status lipat.

Ada dua postur perangkat yang dapat digunakan perangkat:

  • folded: Postur laptop atau buku.

Gambar skema perangkat dalam postur datar atau tablet, dan layar melengkung yang mulus.

  • continuous: Layar datar, tablet, atau bahkan lengkung yang mulus.

Gambar skema perangkat di postur laptop atau buku.

CSS

Spesifikasi Device Posture API menentukan CSS baru fitur-media—postur-perangkat. Fitur media ini me-resolve ke serangkaian postur tetap. Postur ini terdiri sejumlah nilai yang telah ditentukan yang masing-masing mencakup kondisi fisik perangkat seluler.

Nilai fitur device-posture sama dengan deskripsi sebelumnya dari kemungkinan postur:

  • folded
  • continuous

Postur baru dapat ditambahkan di masa mendatang jika perangkat baru diluncurkan ke pasar.

Contoh:

/* 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

Untuk membuat kueri postur perangkat, objek DevicePosture baru tersedia.

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

Untuk bereaksi terhadap perubahan postur perangkat, seperti pengguna membuka penuh perangkat dan Oleh karena itu, beralih dari folded ke continuous, berlanggananlah ke peristiwa change.

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

API Segmen Area Pandang

Segmen area pandang adalah variabel lingkungan CSS yang menentukan posisi dan dimensi area area pandang yang terpisah secara logis. Segmen area pandang adalah dibuat saat area pandang dibagi oleh satu atau beberapa fitur hardware (seperti lipatan atau engsel di antara layar terpisah) yang berfungsi sebagai pemisah. Segmen adalah area tampilan yang terlihat yang dapat diperlakukan berbeda secara logis oleh penulis.

CSS

Jumlah divisi logis yang diekspos melalui dua fitur media baru, ditentukan dalam spesifikasi Level 5 Kueri Media CSS: vertical-viewport-segments dan horizontal-viewport-segments. Mereka memutuskan untuk jumlah segmen yang dibagi dalam area pandang.

Selain itu, variabel lingkungan baru telah ditambahkan untuk mengkueri dimensi setiap pembagian logis. Variabel-variabel ini adalah:

  • 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)

Setiap variabel memiliki dua dimensi, yang mewakili posisi x dan y, masing-masing, dalam grid dua dimensi yang dibuat oleh fitur hardware memisahkan segmen.

Diagram yang menampilkan segmen horizontal dan vertikal. Segmen horizontal pertama adalah x 0 dan y 0, yang kedua x 1 dan y 0. Segmen vertikal pertama adalah x 0 dan y 0, yang kedua x 0 dan y 1.
Segmen horizontal pertama adalah x 0 dan y 0, yang kedua x 1 dan y 0. Segmen vertikal pertama adalah x 0 dan y 0, yang kedua x 0 dan y 1.

Cuplikan kode berikut adalah contoh sederhana pembuatan UX terpisah di mana kami memiliki dua bagian konten (col1 dan col2) di setiap sisi lipatan.

<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>

Foto berikut menunjukkan tampilan pengalaman di perangkat fisik.

Ponsel foldable dalam postur buku vertikal.

Ponsel foldable dalam postur buku horizontal.

Tablet foldable dalam postur buku horizontal.

JavaScript

Untuk mendapatkan jumlah segmen area pandang, periksa entri segments di visualViewport.

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

Setiap entri dalam array segments mewakili setiap segmen logis dari area pandang dengan DOMArray yang menjelaskan koordinat dan ukuran. segments adalah snapshot dari status yang ditentukan saat dikueri, untuk menerima yang Anda perlukan untuk memproses perubahan postur atau mengubah ukuran peristiwa dan membuat kueri ulang segments.

Mencoba API Foldable

API Foldable tersedia di uji coba origin dari Chrome 125 hingga Chrome 128. Lihat Mulai uji coba origin untuk mengetahui informasi latar belakang tentang uji coba origin.

Untuk pengujian lokal, API Foldable dapat diaktifkan dengan Web Eksperimental Tanda fitur platform di chrome://flags/#enable-experimental-web-platform-features. Bisa juga diaktifkan dengan menjalankan Chrome dari baris perintah dengan --enable-experimental-web-platform-features.

Demo

Untuk demo, lihat demo repositori Anda. Jika Anda tidak memiliki perangkat fisik untuk diuji, Anda dapat memilih Galaxy Z Fold 5 atau Asus Perangkat emulasi Zenbook Fold di Chrome DevTools dan beralih antara Kontinu dan Lipat. Anda juga dapat memvisualisasikan engsel saat berlaku.

Chrome DevTools mengemulasi perangkat foldable.