Chrome, Device Posture API ve Viewport Segmentleri olmak üzere iki API'yi deniyor Enumeration API, Chrome'dan kaynak denemesi olarak mevcuttur 125.) Bunlar, hep birlikte katlanabilir API'ler olarak bilinir ve geliştiriciler katlanabilir cihazları hedefliyor. Bu yayında söz konusu API'ler tanıtılmaktadır. bunları test etmeye nasıl başlayacağınız hakkında bilgi sağlar.
Temel olarak iki farklı fiziksel form faktörü vardır: tek bir esnek ekranlar (kusursuz) ve iki ekranlı (dikey yapılı, diğeri de bilinen) cihazlar çift ekranlı cihazlar olarak düşünebilirsiniz.
Bu cihazlar, geliştiricilere bazı zorluklar ve fırsatlar sunar. Bu özellikler ek yöntemlerle görüntülenebiliyor. Örneğin, bir kullanıcının bir tablet gibi kullanmaya başlayabilirsiniz. düz ekran. İki ekranı olan cihazlarda, ekranlar arasında fiziksel bir bağlantı vardır gerekebilir.
Bu yeni API'ler, geliştiricilerin daha iyi kullanıcı deneyimleri sağlamaları için yöntemler sunar bu cihazlarda kullanılabilir. Her API, gerekli web platformu temel öğelerini iki dilde sunar yolları var.
Cihaz Posture API'si
Katlanabilir cihazların duruşlarını_değiştirmelerine olanak veren özellikleri vardır veya cihazın fiziksel durumu. Form faktörünü değiştirerek bir kullanıcı deneyimi sunmasını sağlıyor ve bu yeni API'ler web içeriğinin çeşitli katlama durumlarına tepki verebileceğinden emin olun.
Bir cihaz iki farklı duruşta olabilir:
folded: Dizüstü bilgisayar veya kitap duruşları.
continuous: Düz, tablet veya hatta kesintisiz kavisli ekranlar.
CSS
Device Posture API spesifikasyonu yeni bir CSS tanımlıyor media-feature: device-posture. Bu medya özelliği, bir dizi sabit duruşa çözüm getirir. Bu duruşlar her biri o öğenin fiziksel durumunu kapsayan önceden tanımlı bir dizi değerden olanak tanır.
device-posture özelliğinin değerleri,
olası duruşlar:
foldedcontinuous
İlerleyen zamanlarda piyasaya yeni cihazlar gelirse yeni duruşlar eklenebilir.
Örnekler:
/* 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
Cihazın duruşunu sorgulamak için yeni bir DevicePosture nesnesi kullanılabilir.
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
Cihazın duruş değişikliklerine tepki vermek için (kullanıcının cihazı tamamen açması ve
bu nedenle folded - continuous / change etkinliklerine abone olun.
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
Görünüm Segmentleri API'si
Görüntü alanı segmentleri, konumu tanımlayan ve mantıksal olarak ayrı bir bölgesinin boyutlarını içerir. Görünüm segmentleri bir veya daha fazla donanım özelliğine (örneğin, bir menteşe kullanın. Segmentler komut satırı tarafından mantıksal olarak farklı şekilde değerlendirilebilecek görüntü alanı bölgeleri, yazar.
CSS
Mantıksal bölümlerin sayısı iki yeni medya özelliği aracılığıyla gösterilir:
aşağıdaki CSS Medya Sorguları Düzey 5 spesifikasyonunda tanımlanmıştır:
vertical-viewport-segments ve horizontal-viewport-segments. Böylelikle
Görüntü alanının ayrıldığı segment sayısı.
Ayrıca, kullanıcı edinme ve veri paylaşımının bölümü anlamına gelir. Bu değişkenler şunlardır:
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)
Her değişkenin, x ve y konumunu temsil eden iki boyutu vardır. donanım özelliklerinin oluşturduğu iki boyutlu ızgarada ve segmentleri ayırmanızı sağlar.
Aşağıdaki kod snippet'i, kullanıcıların yalnızca bir kısmını içeren bir kullanıcı deneyimi oluşturmalarına Ekranın her iki yanında da iki içerik bölümü (col1 ve col2) var.
<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>
Aşağıdaki fotoğraflarda, deneyimin fiziksel bir cihazda nasıl göründüğü gösterilmektedir.
JavaScript
Görüntü alanı segmentlerinin sayısını almak için segments girişini kontrol edin
visualViewport.
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
segments dizisindeki her giriş,
koordinatları ve boyutu açıklayan DOMArray ile görünüm. segments
alanı, sorgu sırasında belirtilen durumun anlık görüntüsüdür.
veya etkinlikleri yeniden boyutlandırmanız ve bu değişiklikleri
segments mülk.
Katlanabilir API'leri deneyin
Katlanabilir API'ler kaynak denemesi Chrome 125'ten Chrome 128'e kadar her sürümde çalışır. Görüntüleyin Kaynak denemelerini kullanmaya başlama inceleyin.
Yerel test için, Katlanabilir API'ler Deneysel Web
Platform özelliklerinin bayrağı
chrome://flags/#enable-experimental-web-platform-features Ayrıca
komut satırından Chrome'u çalıştırarak
--enable-experimental-web-platform-features
Demolar
Demolar için demolara bakın depo. Bir test etmek için Galaxy Z Fold 5 veya Asus Chrome Geliştirici Araçları'nda Zenbook Fold emülasyonu ve geçiş yapma Kesintisiz ve Katlanmış. Ayrıca menteşeyi geçerlidir.
İlgili bağlantılar
- Device Posture API
- Viewport Segmentleri API'si