Safari 27.1 Previews Foldable-Screen Web APIs: What Developers Should Test

Apple’s WebKit team published details of Safari 27.1  on October 23, 2026, alongside the arrival of iPhone Duo. The update highlights an important question for web designers: what happens when a browser’s available space changes as a foldable device opens, closes, or runs two windows side by side?

The reassuring part is that ordinary responsive websites do not need special device-specific code. WebKit says Safari on iPhone Duo uses the same engine and web technologies as Safari on other iPhones. Standard CSS Grid, Flexbox, and media queries remain the recommended starting point.

The more experimental news is a preview of two web APIs designed for foldable screens: Device Posture and Viewport Segments. These features are behind developer feature flags, not broadly enabled capabilities that every production website can assume are available.

What changed in Safari 27.1?

WebKit describes three notable behaviors:

• PDF reading adapts to the fold. A PDF can appear as two pages side by side when the phone is partially folded like a book, returning to a single-page view in other positions.
• Viewport sizes vary by device posture. WebKit documents an approximate CSS viewport width range of 382 to 951 pixels across iPhone Duo arrangements, including narrow windows when two apps share the inner display.
• Fold-aware APIs are available for testing. Developers can opt into Device Posture and Viewport Segments via Safari’s feature flags to experiment with layouts designed around a hinge or fold.

These are distinct from a promise that third-party websites will automatically receive fold-state data. The preview APIs are experimental, and their details may evolve.

How the APIs could change layouts

The Device Posture API describes whether a supported display is partially folded (folded) or flat (continuous). A fully closed device using its flat outer display also reports continuous. A CSS enhancement can be scoped like this:

@media (device-posture: folded) {
  .reader-layout {
    /* Enhancement for a supported folded display */
  }
}

The Viewport Segments API describes the usable display regions on either side of a fold. With compatible support enabled, the query @media (horizontal-viewport-segments: 2) can identify two segments arranged side by side. Posture and segment count describe different things; do not assume that every folded device has two horizontal segments.

For ordinary production pages, keep the primary layout independent of these experimental features. A responsive grid that rearranges around the width it is actually given will work in far more environments than a rule for a specific phone.

What web teams should test now

Focus on narrow viewports, split-window scenarios, rotated layouts, and text that expands with zoom or translation. Check that menus remain reachable, forms do not overflow, and important controls are not clipped.

Image behavior matters too. If a page switches between a narrow column and a wide canvas, use properly configured srcset and sizes rather than serving the largest image in every case. Web2Generators’ responsive images tutorial explains how to verify real downloads.

For visual components, the Color Studio can help compare background and text combinations, while the Lorem Ipsum generator provides longer content for stress-testing layouts. These tools do not emulate folding hardware; they help prepare realistic test pages.

WebKit also notes that developers can use Xcode 27.1 or later and its device simulation tools to test iPhone Duo without physical hardware. In the device or simulator settings, open Apps > Safari > Advanced > Feature Flags and enable Device Posture API and Viewport Segments API. Test the page with the flags off as well as on.

Keep the basic page usable without the preview APIs

As of October 26, 2026, Safari 27.1 has been released, and its fold-aware APIs remain experimental developer previews behind flags. Developers should not interpret them as a cross-browser baseline or build essential navigation around their presence.

For a broader Safari compatibility pass, our report on its identity resolution tracking protection covers another reason to test complete user journeys: optional third-party requests may be blocked even when the layout works.

For this layout review, start with long content from the Lorem Ipsum generator, resize the page, and inspect where menus, forms or images stop adapting. Add fold-specific behavior only when that basic page remains usable without it.