Safari 27.1 для iPhone Duo: вьюпорты от 382 до 951 px и API сгиба

23 октября вышел складной iPhone Duo, а вместе с ним Safari 27.1. В блоге WebKit Джен Симмонс объяснила, что это значит для сайтов: движок тот же, что на остальных iPhone, но экранов теперь два, и размер вьюпорта зависит от того, как сложен телефон. На внешнем дисплее ширина 382 CSS-пикселя в портретной ориентации и 594 в альбомной, на внутреннем — 669 и 951, а если открыты два окна рядом, каждому достаётся по 385 пикселей.

Совет WebKit прежний: не подгонять макет под конкретные устройства и не определять их по user agent, а делать адаптивную вёрстку с проверкой возможностей. Для тех, кто хочет учитывать сгиб, в Safari 27.1 появились два API в режиме предварительного просмотра, за флагами в настройках Safari: Device Posture API (медиазапрос device-posture со значениями folded и continuous и свойство navigator.devicePosture) и Viewport Segments API (медиазапросы horizontal-viewport-segments и vertical-viewport-segments, переменные env() вроде viewport-segment-width и массив window.viewport.segments). Так можно, например, разложить сетку на две колонки по половинкам экрана.

Чего пока нет: веб-контент не заходит под боковые элементы управления на внешнем дисплее — WebKit ищет замену подходу с viewport-fit=cover, который многие сайты реализуют не до конца. О Safari 27.1 для Mac, iPad и обычных iPhone в заметке не сказано. Проверить сайт без устройства можно в симуляторе iPhone Duo из Device Hub в Xcode 27.1. И мелочь для читателей: в полусложенном положении Safari показывает PDF разворотом на две страницы.

Источник: WebKit Blog