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 соответственно в двумерной сетке, созданной аппаратными функциями, разделяющими сегменты.
![Диаграмма, показывающая горизонтальные и вертикальные сегменты. Первый горизонтальный отрезок — это х 0 и у 0, второй — х 1 и у 0. Первый вертикальный отрезок — это х 0 и у 0, второй — х 0 и у 1.](https://developer.chrome.google.cn/static/blog/foldable-apis-ot/origintrialfor--eaocssmg9t.png?authuser=3&hl=ru)
Следующий фрагмент кода представляет собой упрощенный пример создания разделенного пользовательского интерфейса, где у нас есть два раздела контента (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 и переключаться между непрерывным и сложенным . Вы также можете визуализировать шарнир, если это применимо.
Ссылки по теме
- API положения устройства
- API сегментов области просмотра