Chrome sedang menguji coba dua API, yaitu Device Posture API dan Viewport Segment Enumeration API, yang tersedia sebagai uji coba origin dari Chrome 125. Secara kolektif, API ini dikenal sebagai API Foldable, yang dirancang untuk membantu developer menargetkan perangkat foldable. Postingan ini memperkenalkan API ini, dan memberikan informasi tentang cara mulai mengujinya.
Ada dua faktor bentuk fisik utama yang berbeda: perangkat dengan satu layar fleksibel (mulus), dan perangkat dengan dua layar (dengan sambungan, juga dikenal sebagai perangkat dua layar).
Perangkat ini memberikan tantangan dan peluang bagi para developer. Format ini memberikan cara lain untuk menonton konten. Misalnya, pengguna mungkin memegang perangkat yang mulus seperti buku, lalu beralih menggunakannya seperti tablet dengan layar datar. Perangkat dengan dua layar memiliki gabungan fisik antara layar-layar yang mungkin perlu diperhitungkan.
API baru ini memberikan cara bagi developer untuk memberikan pengalaman pengguna yang lebih baik bagi perangkat ini. Setiap API mengekspos primitif platform web yang diperlukan dalam dua cara, melalui CSS dan JavaScript.
API Posture Perangkat
Perangkat foldable memiliki kemampuan yang memungkinkannya mengubah_ postur_, atau status fisik perangkat. API baru ini dapat mengubah faktor bentuk sehingga penulis konten dapat memberikan pengalaman pengguna yang berbeda, dan API baru ini memastikan konten web dapat bereaksi terhadap berbagai status lipat.
Ada dua postur perangkat yang dapat digunakan perangkat:
folded
: Postur laptop atau buku.
continuous
: Layar datar, tablet, atau bahkan lengkung yang mulus.
CSS
Spesifikasi Device Posture API menentukan fitur media CSS baru—postur perangkat. Fitur media ini me-resolve ke serangkaian postur tetap. Postur ini terdiri dari sejumlah nilai yang telah ditentukan yang masing-masing mencakup status fisik perangkat.
Nilai fitur device-posture
cocok dengan deskripsi kemungkinan postur sebelumnya:
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 perangkat sepenuhnya sehingga
beralih dari folded
ke continuous
, berlangganan 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 dibuat saat area pandang dibagi oleh satu atau beberapa fitur hardware (seperti lipatan atau engsel di antara layar yang terpisah) yang berfungsi sebagai pemisah. Segmen adalah wilayah area pandang yang dapat diperlakukan berbeda secara logis oleh penulis.
CSS
Jumlah pembagian logis yang diekspos melalui dua fitur media baru, yang ditentukan dalam spesifikasi Level 5 Kueri Media CSS: vertical-viewport-segments
dan horizontal-viewport-segments
. Dia menentukan jumlah segmen yang dibagi 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 masing-masing mewakili posisi x dan y dalam petak dua dimensi yang dibuat oleh fitur hardware yang memisahkan segmen.
Cuplikan kode berikut adalah contoh sederhana untuk membuat UX terpisah dengan 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.
JavaScript
Untuk mendapatkan jumlah segmen area tampilan, 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. Kolom segments
adalah snapshot dari status yang ditentukan saat dikueri. Agar dapat menerima nilai
terbaru, Anda perlu memproses perubahan postur atau mengubah ukuran peristiwa dan mengkueri ulang
properti segments
.
Mencoba API Foldable
API Foldable tersedia dalam uji coba origin dari Chrome 125 hingga Chrome 128. Lihat Memulai uji coba origin untuk mengetahui informasi latar belakang tentang uji coba origin.
Untuk pengujian lokal, API Foldable dapat diaktifkan dengan flag fitur Web
Platform Eksperimental di
chrome://flags/#enable-experimental-web-platform-features
. Fungsi ini juga dapat
diaktifkan dengan menjalankan Chrome dari command line dengan
--enable-experimental-web-platform-features
.
Demo
Untuk demo, lihat repositori demo. Jika tidak memiliki perangkat fisik untuk melakukan pengujian, Anda dapat memilih perangkat emulasi Galaxy Z Fold 5 atau Asus Zenbook Fold di Chrome DevTools lalu beralih antara Continuous dan Folded. Anda juga dapat memvisualisasikan engsel jika memungkinkan.
Link terkait
- Device Posture API
- Viewport Segment API