Пробная версия Origin для Foldable API

Алексис Менар
Alexis Menard
X GitHub
Томас Штайнер

Chrome тестирует два API: Device Posture API и Viewport Segments Enumeration API, которые доступны в качестве исходной пробной версии Chrome 125. Они известны под общим названием Foldable API и предназначены для помощи разработчикам в работе со складными устройствами. В этом посте представлены эти API и информация о том, как начать их тестирование.

В основном существует два разных физических форм-фактора: устройства с одним гибким экраном (бесшовные) и устройства с двумя экранами (со швом, также известные как устройства с двумя экранами).

Схематическое изображение устройства с одним гибким экраном (бесшовным) слева и устройства с двумя экранами (со швом, также известное как двойной экран) справа.

Эти устройства представляют собой проблемы и возможности для разработчиков. Они предоставляют дополнительные способы просмотра контента. Например, пользователь может держать в руках бесшовное устройство, например книгу, а затем перейти к использованию его как планшета с плоским экраном. Устройства с двумя экранами имеют физическое соединение между экранами, которое, возможно, необходимо учитывать.

Эти новые API предоставляют разработчикам возможность улучшить взаимодействие с пользователем на этих устройствах. Каждый API предоставляет необходимые примитивы веб-платформы двумя способами: через CSS и JavaScript.

API положения устройства

Складные устройства имеют возможности, которые позволяют им менять свое положение или физическое состояние устройства. Они могут менять свой форм-фактор, позволяя авторам контента предоставлять другой пользовательский интерфейс, а эти новые API гарантируют, что веб-контент может реагировать на различные состояния свертывания.

Устройство может находиться в двух положениях:

  • folded : позы ноутбука или книги.

Схематическое изображение устройств в плоском положении или в положении планшета, а также бесшовный изогнутый дисплей.

  • continuous : плоские, планшетные или даже бесшовные изогнутые дисплеи.

Схематический рисунок устройств в позах ноутбука или книги.

CSS

Спецификация Device Posture API определяет новую медиа-функцию CSS — device-posture . Эта медиа-функция сводится к набору фиксированных поз. Эти положения состоят из ряда предопределенных значений, каждое из которых отражает физическое состояние устройства.

Значения функции device-posture соответствуют предыдущему описанию возможных поз:

  • folded
  • continuous

Новые позиции могут быть добавлены в будущем, если на рынке появятся новые устройства.

Примеры:

/* 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

Для запроса состояния устройства доступен новый объект DevicePosture .

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

Чтобы реагировать на изменения положения устройства, например, когда пользователь полностью открывает устройство и, следовательно, переходит от folded к continuous , подпишитесь на события change .

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

API сегментов области просмотра

Сегменты области просмотра — это переменные среды CSS, которые определяют положение и размеры логически отдельной области области просмотра. Сегменты области просмотра создаются, когда область просмотра разделена одной или несколькими аппаратными функциями (например, сгибом или шарниром между отдельными дисплеями), которые действуют как разделитель. Сегменты — это области области просмотра, которые автор может рассматривать как логически отдельные.

CSS

Количество логических делений отображается с помощью двух новых медиафункций, определенных в спецификации CSS Media Queries Level 5: vertical-viewport-segments и horizontal-viewport-segments . Они соответствуют количеству сегментов, на которые разбита область просмотра.

Кроме того, были добавлены новые переменные среды для запроса размеров каждого логического подразделения. Эти переменные:

  • env(viewport-segment-width xy)
  • env(viewport-segment-height xy)
  • env(viewport-segment-top xy)
  • env(viewport-segment-left xy)
  • env(viewport-segment-bottom xy)
  • env(viewport-segment-right xy)

Каждая переменная имеет два измерения, которые представляют положение x и y соответственно в двумерной сетке, созданной аппаратными функциями, разделяющими сегменты.

Диаграмма, показывающая горизонтальные и вертикальные сегменты. Первый горизонтальный отрезок — это x 0 и y 0, второй — x 1 и y 0. Первый вертикальный отрезок — x 0 и y 0, второй — x 0 и y 1.
Первый горизонтальный отрезок — это x 0 и y 0, второй — x 1 и y 0. Первый вертикальный отрезок — x 0 и y 0, второй — x 0 и y 1.

Следующий фрагмент кода представляет собой упрощенный пример создания разделенного пользовательского интерфейса, где у нас есть два раздела контента (col1 и 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>

На следующих фотографиях показано, как это выглядит на физическом устройстве.

Складной телефон в вертикальном положении-книге.

Складной телефон в горизонтальном положении-книге.

Складной планшет в горизонтальном положении книги.

JavaScript

Чтобы получить количество сегментов области просмотра, проверьте запись segments в visualViewport .

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

Каждая запись в массиве segments представляет каждый логический сегмент области просмотра с помощью DOMArray описывающего координаты и размер. Поле segments представляет собой снимок заданного состояния при запросе. Чтобы получать обновленные значения, вам необходимо прослушивать изменения положения или события изменения размера и повторно запрашивать свойство segments .

Попробуйте складные API

API-интерфейсы Foldable доступны в пробной версии Origin от Chrome 125 до Chrome 128. Дополнительную информацию о пробных версиях Origin см. в разделе Начало работы с пробными версиями Origin .

Для локального тестирования Foldable API можно включить с помощью флага функций экспериментальной веб-платформы по адресу chrome://flags/#enable-experimental-web-platform-features . Его также можно включить, запустив Chrome из командной строки с помощью --enable-experimental-web-platform-features .

Демо

Демо-версии см. в репозитории demos . Если у вас нет физического устройства для тестирования, вы можете выбрать эмулируемое устройство Galaxy Z Fold 5 или Asus Zenbook Fold в Chrome DevTools и переключаться между непрерывным и сложенным режимами . Вы также можете визуализировать шарнир, если это применимо.

Chrome DevTools, эмулирующий складное устройство.