Разом із виходом iPhone Duo компанія Apple випустила оновлену версію браузера — Safari 27.1. Головна новина полягає в тому, що новин по суті немає: браузер працює на тому самому движку WebKit і підтримує ті самі вебтехнології, що й на всіх інших iPhone. Тож сайти та вебзастосунки відкриваються на новому пристрої так само, як і будь-де ще.

Втім, одна зміна для користувачів все ж є. Якщо тримати iPhone Duo частково складеним, наче книгу, і переглядати PDF-документ у вебі, Safari 27.1 автоматично показує його у вигляді двох сторінок поруч. Щойно пристрій розкладають повністю або складають до кінця, браузер повертається до відображення однієї сторінки.

Для розробників у Safari 27.1 на iPhone Duo додали попередній доступ до Device Posture API та Viewport Segments API — обидві функції приховані за прапорцями.

Розміри viewport

Перше, що цікавить веб-дизайнерів і розробників, — це розміри та форми екранів нового пристрою.

Якщо проєкт вже побудовано за сучасними підходами адаптивного вебдизайну, з медіазапитами, гнучкими макетами на CSS Grid, Flexbox та інших інструментах, він однаково коректно відображатиметься й працюватиме на новому пристрої.

Для тих, кому цікаві подробиці: iPhone Duo має два дисплеї — зовнішній, який активний, коли телефон складено, і більший внутрішній, що працює, коли пристрій розкрито. Зовнішній екран підтримує і портретну, і альбомну орієнтацію, а панель вкладок за замовчуванням розташована знизу, як і на решті iPhone. Внутрішній дисплей так само працює в обох орієнтаціях, але панель вкладок у ньому розміщена згори — за аналогією з iPad чи Mac. Коли внутрішній екран перебуває в альбомній орієнтації, користувачі можуть розмістити два вікна поруч, і кожне з них отримує вузький портретний viewport. Як і на звичайних iPhone, під час прокручування панель вкладок стає меншою, звільняючи місце для вебконтенту.

У всіх можливих комбінаціях ширина viewport (у CSS-пікселях) у Safari 27.1 коливається від 382 до 951, а висота — від 368 до 902.

Утім, запамʼятовувати ці цифри не обовʼязково. Варто покладатися на принципи адаптивного вебдизайну та створювати макети, які однаково добре працюють на екранах будь-якого розміру — від найбільших до найменших. Сучасний CSS надає потужні інструменти для гнучких і текучих макетів. Розробникам радять уникати визначення пристрою через UA sniffing і натомість використовувати feature detection — такий підхід гарантує стабільну роботу проєкту незалежно від того, які пристрої зʼявляться в майбутньому.

Щоб протестувати сайт чи застосунок, фізичний iPhone Duo не потрібен. Достатньо завантажити Xcode 27.1 або новішу версію й скористатися Device Hub, де можна створити й запустити симулятор iPhone Duo.

Створення макетів для складаного екрана

Коли iPhone Duo частково складено, відкриваються цікаві можливості для дизайну. Саме тому розробникам цікаві Device Posture API та Viewport Segments API — обидва підтримуються в Safari 27.1 на iPhone Duo як попередній розробницький доступ за прапорцями функцій.

Щоб увімкнути ці можливості, потрібно перейти в Settings > Apps > Safari > Advanced > Feature Flags і активувати опції «Device Posture API» та «Viewport Segments API».

Команда WebKit закликає розробників, які спробують ці функції, поділитися враженнями: чи дають вони змогу реалізувати потрібний досвід для iPhone Duo, чи варто змінити їхню поведінку.

Device Posture API

Device Posture API повідомляє, чи частково складений екран пристрою — як у CSS, так і в JavaScript, через медіазапит device-posture та властивість navigator.devicePosture. Можливі два стани:

  • folded — коли пристрій частково складений, у позі книги або ноутбука
  • continuous — коли екран пласкій, тобто повністю розкритий або повністю закритий

У CSS медіазапит дозволяє змінювати стилі, коли пристрій частково складений:

@media (device-posture: folded) { .layout { display: grid; grid-template-columns: 1fr 1fr; } }

У JavaScript можна зчитувати поточний стан через navigator.devicePosture.type і стежити за подією change, щоб реагувати на зміну положення:

function reportPosture() { console.log(`Device posture: ${navigator.devicePosture.type}`); } reportPosture(); navigator.devicePosture.addEventListener("change", reportPosture);

Viewport Segments API

Viewport Segments API влаштований складніше: він описує «сегменти» дисплея — окремі ділянки по обидва боки від місця згину.

Після активації прапорця Safari 27.1 підтримує медіазапити horizontal-viewport-segments та vertical-viewport-segments, які відповідають кількості сегментів, розміщених поруч або один над одним:

@media (horizontal-viewport-segments: 2) { } @media (vertical-viewport-segments: 2) { }

Щоб точно підганяти елементи під межі кожного сегмента, Viewport Segments API додає шість змінних середовища:

  • viewport-segment-width
  • viewport-segment-height
  • viewport-segment-top
  • viewport-segment-right
  • viewport-segment-bottom
  • viewport-segment-left

Кожна з них приймає два індекси — номер колонки й номер рядка сегмента, відлік яких починається з 0 у верхньому лівому куті. Якщо два сегменти розташовані поруч, лівий матиме координати 0 0, а правий — 1 0. Якщо вони розташовані один над одним, верхній матиме координати 0 0, а нижній — 0 1.

Наприклад, такий макет створює дві колонки, кожна з яких відповідає ширині доступного простору по обидва боки від згину:

@media (horizontal-viewport-segments: 2) { .wrapper { display: grid; grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0); } }

У JavaScript властивість window.viewport.segments повертає масив обʼєктів DOMRect — по одному на кожен сегмент. Цей масив варто перевіряти щоразу, коли змінюється положення пристрою або розмір вікна:

function reportSegments() { window.viewport.segments.forEach((segment, i) => { console.log(`Segment ${i}: ${segment.width}px × ${segment.height}px`); }); } reportSegments(); navigator.devicePosture.addEventListener("change", reportSegments); window.addEventListener("resize", reportSegments);

Оскільки Device Posture API та Viewport Segments API досі перебувають за прапорцями, їхню поведінку ще можна скоригувати. Команда WebKit запрошує розробників ділитися ідеями та пропозиціями.

Вебконтент під системними елементами керування

Неважко помітити, що зовнішній дисплей iPhone Duo ширший і нижчий за екрани інших моделей iPhone. Щоб звільнити більше вертикального простору для контенту, iOS переносить елементи керування вбік.

У Safari 27.1 вебконтент наразі не розтягується на простір позаду цих елементів керування. Як і на інших платформах, Safari аналізує сторінку й просто заповнює цю ділянку кольором фону.

Команда WebKit хоче дати дизайнерам і розробникам можливість використовувати цей простір креативніше — наприклад, розтягувати фон шапки сайту на всю ширину екрана. Хоча здається, що існує один очевидний спосіб це реалізувати, насправді варіантів кілька.

Одне з рішень — використати HTML-метатег viewport зі значенням viewport-fit="cover", щоб розтягнути сторінку на весь простір, покладаючись на те, що розробники коректно застосують відповідні змінні середовища й відсунуть важливий контент від системних елементів керування. Але аналіз чинних сайтів показує, що багато проєктів неправильно обробляють відступи одразу з усіх чотирьох боків. Тому команда досліджує, чи існує надійніший і простіший спосіб досягти того самого результату, і запрошує розробників ділитися ідеями.

Зворотний звʼязок

Поділитися думками можна, звернувшись до Jen Simmons у Bluesky чи Mastodon. Якщо виникають проблеми, команда закликає надсилати відгуки про інтерфейс Safari або повідомляти про помилки WebKit, повʼязані з вебтехнологіями чи Web Inspector.

Джерело: WebKit Blog