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).
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.
continuous
: Layar datar, tablet, atau bahkan lengkung yang mulus.
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.
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.
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.
Link terkait
- API Posture Perangkat
- Viewport Segment API