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

Alexis Menard

Thomas Steiner

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

Примечание. Эти API были разработаны в течение последних нескольких лет в сотрудничестве с Microsoft, Intel, Samsung и Google.

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

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

Эти новые 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.

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

Примечание. Во время пробной версии источника window.visualViewport.segments будет работать. Согласно обсуждению Рабочей группы CSS, окончательную форму API еще предстоит определить.

Каждая запись в массиве 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 и переключаться между непрерывным и сложенным . Вы также можете визуализировать шарнир, если это применимо.

Ссылки по теме

• API положения устройства
  • Позиция Мозиллы
  • Позиция вебкита
  • Запись статуса Chrome
  • Спецификация W3C
• API сегментов области просмотра
  • Позиция Мозиллы
  • Позиция веб-кита
  • Запись статуса Chrome
  • Спецификация медиа-запроса W3C CSS и спецификация переменной среды W3C CSS