Chrome testuje 2 interfejsy API: Device Posture API i Viewport Segments Enumeration API, które są dostępne w ramach testowania origin w Chrome 125. Są to tzw. składane interfejsy API, które mają pomóc programistom w kierowaniu reklam na urządzenia składane. W tym poście omówimy te interfejsy API i dowiesz się, jak zacząć je testować.
Występują głównie 2 różne formaty fizyczne: urządzenia z jednym elastycznym ekranem (bezproblemowy) i urządzenia z 2 ekranami (z połączeniem, znane również jako urządzenie z 2 ekranami).
Takie urządzenia wiążą się z wyzwaniami i szansami dla programistów. Zapewniają one dodatkowe sposoby wyświetlania treści. Użytkownik może na przykład trzymać urządzenie, takie jak książka, a potem zmienić je w tablet z płaskim ekranem. Urządzenia z 2 ekranami są połączone fizycznymi urządzeniami, które trzeba uwzględnić.
Te nowe interfejsy API pozwalają deweloperom zadbać o lepszą obsługę użytkowników tych urządzeń. Każdy interfejs API ujawnia potrzebne podstawowe elementy platformy internetowej na 2 sposoby: za pomocą CSS i JavaScriptu.
Interfejs Device Posture API
Urządzenia składane mają funkcje, które umożliwiają zmianę stanu, czyli stanu fizycznego urządzenia. Można zmienić format, pozwalając autorom treści dostosować sposób obsługi, a nowe interfejsy API zapewniają, że treści z internetu mogą reagować na różne stany zwijania.
Urządzenie może mieć 2 stany:
folded
: stan laptopa lub książki.
continuous
: płaski, tablet, a nawet zakrzywiony ekran.
CSS
Specyfikacja interfejsu Device Posture API definiuje nową funkcję CSS media-feature – device-posture. Ta funkcja multimediów przyjmuje zestaw stałych stanów. Te stany składają się z kilku wstępnie zdefiniowanych wartości, z których każda obejmuje fizyczny stan urządzenia.
Wartości funkcji device-posture
pasują do poprzedniego opisu możliwych stanów:
folded
continuous
W przyszłości możemy dodać nowe stany, gdy pojawią się na rynku nowe urządzenia.
Przykłady:
/* 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
Aby można było wysłać zapytanie o stan urządzenia, dostępny jest nowy obiekt DevicePosture
.
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
Aby reagować na zmiany stanu urządzenia, np. gdy użytkownik całkowicie otworzy urządzenie i przejdzie z trybu folded
do continuous
, zasubskrybuj zdarzenia change
.
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
Interfejs API segmentów widocznych obszarów
Segmenty widocznego obszaru to zmienne środowiskowe CSS, które definiują pozycję i wymiary logicznie oddzielonego obszaru widocznego obszaru. Segmenty widocznych obszarów tworzy się, gdy widoczny obszar jest dzielony przez co najmniej 1 element sprzętowy (np. zwinięcie lub zawias między osobnymi wyświetlaczami), które pełnią funkcję separu. Segmenty to obszary widocznego obszaru, które autor może traktować jako logicznie różne.
CSS
Liczba podziałów logicznych jest przedstawiona za pomocą 2 nowych funkcji multimedialnych zdefiniowanych w specyfikacji zapytań o media CSS na poziomie 5: vertical-viewport-segments
i horizontal-viewport-segments
. Ich długość zależy od liczby segmentów, na które podzielony jest widoczny obszar.
Dodaliśmy też nowe zmienne środowiskowe, które pozwalają wykonywać zapytania dotyczące wymiarów każdego podziału logicznego. Te zmienne to:
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)
Każda zmienna ma 2 wymiary, które reprezentują odpowiednio pozycję x i y w dwuwymiarowej siatce utworzonej przez funkcje sprzętowe rozdzielające segmenty.
Poniższy fragment kodu to uproszczony przykład podzielonego UX, w którym po każdej stronie strony widocznej na ekranie znajdują się 2 sekcje treści (col1 i 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>
Poniższe zdjęcia pokazują, jak wygląda strona na urządzeniu fizycznym.
JavaScript
Aby poznać liczbę segmentów widocznego obszaru, sprawdź wpis segments
w narzędziu visualViewport
.
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
Każdy wpis w tablicy segments
reprezentuje każdy logiczny segment widocznego obszaru z elementem DOMArray
opisującym współrzędne i rozmiar. Pole segments
zawiera podgląd danego stanu po wysłaniu zapytania. Aby otrzymywać zaktualizowane wartości, musisz nasłuchiwać zmian stanu lub zmiany rozmiaru zdarzeń i ponownie przesłać zapytanie do właściwości segments
.
Wypróbuj składane interfejsy API
Składane interfejsy API są dostępne w wersji próbnej origin od Chrome 125 do wersji 128. Więcej informacji o testowaniu origin znajdziesz w artykule Pierwsze kroki z testowaniem origin.
Na potrzeby testów lokalnych składane interfejsy API można włączyć za pomocą flagi funkcji Eksperymentalnej platformy internetowej (chrome://flags/#enable-experimental-web-platform-features
). Możesz też to zrobić, uruchamiając Chrome z wiersza poleceń, używając polecenia --enable-experimental-web-platform-features
.
Przykłady
Wersje demonstracyjne znajdziesz w repozytorium demonstracji. Jeśli nie masz fizycznego urządzenia, na którym można by przeprowadzić test, w Narzędziach deweloperskich w Chrome wybierz emulację urządzenia Galaxy Z Fold 5 lub Asus Zenbook Fold, a następnie przełącz się między trybem Ciągły lub Składany. W razie potrzeby możesz też zwizualizować zawias.
Powiązane artykuły
- Device Posture API
- Viewport Segments API