Ta strona została przetłumaczona przez Cloud Translation API.

Testowanie origin dla składanych interfejsów API

Alexis Menard

Thomas Steiner

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ą one nazywane zbiorczo interfejsami API składanych urządzeń i służą do kierowania aplikacji na urządzenia składane. W tym poście przedstawiamy te interfejsy API i podajemy informacje o tym, jak rozpocząć ich testowanie.

Istnieją 2 główne formaty fizyczne: urządzenia z pojedynczym elastycznym ekranem (bezszwowe) i urządzenia z 2 ekranami (z szwami, zwane także urządzeniami z podwójnym ekranem).

Rysunek poglądowy urządzenia z jednym elastycznym ekranem (bezszwowym) po lewej stronie i urządzenia z dwoma ekranami (ze szwem, zwanym też podwójnym ekranem) po prawej stronie.

Urządzenia te stanowią dla deweloperów wyzwanie i stwarzają nowe możliwości. Zapewniają one dodatkowe sposoby wyświetlania treści. Użytkownik może na przykład trzymać urządzenie bezszwowe jak książkę, a potem używać go jak tabletu z płaskim ekranem. Urządzenia z 2 ekranami mają fizyczne połączenie między ekranami, które może wymagać uwzględnienia.

Te nowe interfejsy API pozwalają deweloperom zadbać o lepszą obsługę użytkowników tych urządzeń. Każdy interfejs API udostępnia potrzebne elementy platformy internetowej na 2 sposoby: za pomocą języka CSS i JavaScript.

Interfejs Device Posture API

Składane urządzenia mają możliwości, które umożliwiają zmianę _postawy_, czyli fizycznego stanu urządzenia. Mogą one zmieniać swój format, co pozwala autorom treści zapewniać użytkownikom różne wrażenia. Nowe interfejsy API sprawiają, że treści internetowe mogą reagować na różne stany składania.

Urządzenie może mieć 2 stany:

folded: pozycja podczas korzystania z laptopa lub książki.

Rysunek schematyczny urządzeń w pozycji poziomej lub w postaci tabletu oraz bezszwowego wyświetlacza.

continuous: płaskie, tabletowe, a nawet bezszwonne wyświetlacze zakrzywione.

Schematyczny rysunek urządzeń w stanach laptopa lub książki.

CSS

Specyfikacja interfejsu Device Posture API definiuje nową cechę mediów 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 odpowiadają poprzedniemu opisowi możliwych postaw:

folded
continuous

W przyszłości, gdy na rynku pojawią się nowe urządzenia, możemy dodać nowe pozycje.

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 zapytać o postawę urządzenia, możesz użyć nowego obiektu 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}`);
});

Viewport Segments API

Segmenty widocznego obszaru to zmienne środowiskowe CSS, które określają położenie i wymiary logicznie oddzielnego regionu widocznego obszaru. Segmenty widoku są tworzone, gdy widok jest podzielony przez co najmniej 1 funkcję sprzętową (np. zawias lub zawias między oddzielnymi wyświetlaczami), która działa jako podział. Segmenty to obszary widocznego obszaru, które mogą być traktowane jako logicznie odrębne przez autora.

CSS

Liczba podziałów logicznych jest udostępniana za pomocą 2 nowych funkcji mediów zdefiniowanych w specyfikacji zapytań o multimedia CSS poziomu 5: vertical-viewport-segments i horizontal-viewport-segments. Są one określane przez liczbę segmentów, na które podzielono widok.

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.

Diagram pokazujący segmenty poziome i pionowe Pierwszy segment poziomy to x 0 i y 0, a drugi to x 1 i y 0. Pierwszy segment pionowy ma współrzędne x 0 i y 0, a drugi – x 0 i y 1. — Pierwszy segment poziomy ma współrzędne x 0 i y 0, a drugi – x 1 i y 0. Pierwszy segment pionowy ma współrzędne x 0 i y 0, a drugi – x 0 i y 1.

Ten fragment kodu to uproszczony przykład tworzenia UX podzielonego, w którym po obu stronach mamy 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.

Składany telefon w pionowej pozycji książki.

Składany telefon w poziomej pozycji książki.

Składany tablet w poziomie w postaci książki.

JavaScript

Aby uzyskać liczbę segmentów widoku, sprawdź wpis segments w pliku visualViewport.

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

Każdy wpis w tablicy segments odpowiada poszczególnym logicznym segmentom strefy widoku, a element DOMArray zawiera opis współrzędnych i wielkości. Pole segments zawiera zrzut 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 interfejsy API dotyczące składanych urządzeń

Interfejsy API urządzeń składanych są dostępne w testowaniu origin w wersjach Chrome od 125 do 128. Więcej informacji o testowaniu origin znajdziesz w artykule Pierwsze kroki z testowaniem origin.

Aby przeprowadzić testy lokalne, możesz włączyć interfejsy API Foldable za pomocą flagi funkcji eksperymentalnych platformy internetowej na stronie 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.

Prezentacje

Demonstracje znajdziesz w repozytorium demonstracji. Jeśli nie masz fizycznego urządzenia do testowania, możesz wybrać urządzenie emulowane Galaxy Z Fold 5 lub Asus Zenbook Fold w Chrome DevTools i przełączać się między trybami Ciągły i Złożony. W stosownych przypadkach możesz też wyświetlić zawias.

Narzędzia deweloperskie w Chrome emulujące urządzenie składane.

Powiązane artykuły

Device Posture API
Viewport Segments API