Safari 27.1 Introduces Foldable-Aware Web Features for iPhone Duo, With New APIs for Responsive Layouts
Apple has introduced new foldable-device capabilities in Safari 27.1, released alongside the iPhone Duo on October 23, 2026. The update adds automatic two-page PDF viewing when the device is partially folded, introduces developer previews of APIs for detecting device posture and identifying separate display segments, and opens the door to new web experiences designed specifically for foldable screens.
The changes are part of Apple's broader effort to make websites and web applications adapt to the iPhone Duo's different display configurations. Rather than requiring developers to build entirely separate websites for every position, Safari is extending the web platform with tools that allow applications to respond to the available screen space and the device's physical configuration.
However, not every capability is ready for general use. The new Device Posture API and Viewport Segments API are available as developer previews behind Safari feature flags. Apple is also investigating ways to let websites make better use of the space behind Safari's controls on the outer display, but has not yet announced a finalized solution.
Source: WebKit — Features for Safari 27.1.
1. Safari Automatically Displays PDFs as Two Pages on the Foldable Screen
The most immediately visible change in Safari 27.1 is its handling of PDF documents when the iPhone Duo is partially folded.
When a user opens a PDF in Safari and holds the device in a book-like position, the browser automatically presents the document as two pages side by side. This creates a more natural reading experience for documents designed for two-page viewing, such as books, magazines, reports, and academic publications.
When the user opens the device completely flat or closes it fully, Safari returns to a single-page PDF view.
The behavior takes advantage of the foldable display's geometry without requiring users to configure the layout manually.
Why this matters
On conventional smartphones, PDF viewers commonly display one page at a time because the available screen width makes simultaneous two-page reading impractical.
The iPhone Duo introduces a different use case. When partially folded, its two inner display sections can resemble an open book. Presenting a PDF across those sections can make it easier to compare adjacent pages, follow diagrams, read tables, and navigate longer documents.
The change also illustrates a broader principle: applications can become more useful when they respond to how a device is being held rather than relying exclusively on its screen dimensions.
Importantly, this is an automatic Safari behavior. Website developers do not need to implement the two-page PDF switching themselves to benefit from the browser's built-in functionality.
Source: Official WebKit announcement.
2. The Device Posture API Lets Websites Detect the Fold
Safari 27.1 introduces a developer preview of the Device Posture API, which allows web content to determine whether the iPhone Duo is partially folded or in a continuous display configuration.
Traditional responsive websites adapt primarily to the dimensions of the browser viewport. They use CSS media queries, flexible grids, and layout rules to respond to different screen widths and heights.
Foldable devices introduce another variable: physical posture.
Two screens with similar viewport dimensions may require different layouts depending on whether the device is flat, partially folded, or positioned like a laptop.
The Device Posture API provides a way for web developers to account for this difference.
The API exposes two posture states:
-
folded— The screen is partially folded, such as in a book or laptop position. -
continuous— The display is flat, including both the fully opened and fully closed configurations.
Developers can access posture information through CSS or JavaScript.
CSS example
A website could use the posture media query to change its layout when the display is partially folded:
@media (device-posture: folded) {
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
}
In this example, the layout switches to two columns when the device reports a folded posture. A reading application might display an article on one side and supplementary information on the other.
The exact design depends on the content and the space available within each display segment.
JavaScript example
Web applications can also read the current posture and listen for changes:
function reportPosture() {
console.log(
`Device posture: ${navigator.devicePosture.type}`
);
}
reportPosture();
navigator.devicePosture.addEventListener(
"change",
reportPosture
);
This makes it possible to respond when a user changes the device's physical position.
For example, a web-based presentation application could adjust its controls when the device moves into a laptop-like configuration. A reading application could reconsider how it arranges navigation and document content.
These are potential applications of the API rather than features automatically provided to every website.
3. The Viewport Segments API Provides More Precise Display Information
While the Device Posture API tells a website whether the device is folded, the Viewport Segments API provides information about the separate regions of the display.
This distinction is important because knowing that a device is folded does not, by itself, tell a website exactly how much space is available on each side of the fold.
The Viewport Segments API provides information about the dimensions and positions of those regions, allowing developers to create layouts that respect the device's physical configuration.
Safari 27.1 introduces preview support for the API through feature flags.
Detecting horizontal and vertical segments
Developers can use CSS media queries to determine whether the viewport is divided into two side-by-side segments or two vertically stacked segments.
@media (horizontal-viewport-segments: 2) {
.reader {
/* Layout for two side-by-side segments */
}
}
@media (vertical-viewport-segments: 2) {
.reader {
/* Layout for two vertically stacked segments */
}
}
A horizontally divided layout could be useful when the device is held like an open book. A vertically divided layout could suit applications used in a laptop-like position.
These media queries describe the viewport structure, not merely the device model. That helps developers focus on the actual layout environment rather than identifying a specific phone by name.
Measuring individual segments
The API also introduces CSS environment variables for accessing each segment's dimensions and boundaries:
viewport-segment-widthviewport-segment-heightviewport-segment-topviewport-segment-rightviewport-segment-bottomviewport-segment-left
For a device with two horizontal segments, developers can use the segment widths to define separate grid columns.
@media (horizontal-viewport-segments: 2) {
.wrapper {
display: grid;
grid-template-columns:
env(viewport-segment-width 0 0)
env(viewport-segment-width 1 0);
}
}
The two indices identify a segment's column and row. The left-hand segment in a side-by-side arrangement is 0 0, while the right-hand segment is 1 0.
This allows developers to size individual regions according to the dimensions reported by the browser rather than relying on hardcoded measurements.
JavaScript applications can also inspect window.viewport.segments, which exposes the segments as an array of DOMRect objects.
Together, these capabilities provide a foundation for foldable-aware interfaces that can respond to both the physical posture of the device and the geometry of the available display regions.
Source: WebKit — Device Posture and Viewport Segments APIs.
4. The New APIs Are Experimental, Not Enabled by Default
Developers should be aware that the two foldable-related APIs are currently available as a preview behind feature flags.
To enable them on a compatible iPhone Duo running Safari 27.1, Apple's instructions are:
- Open Settings.
- Navigate to Apps → Safari → Advanced → Feature Flags.
- Enable Device Posture API.
- Enable Viewport Segments API.
Both flags are needed to test the complete set of capabilities described in the WebKit announcement.
This preview approach gives Apple and developers an opportunity to evaluate how the APIs work with real websites and whether their behavior needs refinement before broader availability.
It also means developers should not build their entire production experience around the assumption that these APIs are enabled for every visitor.
A website should continue to work when posture information or viewport-segment details are unavailable. Developers can use feature detection and progressive enhancement to introduce specialized layouts only where browser support exists.
This is particularly important for websites accessed from conventional iPhones, Android devices, tablets, and desktop browsers.
The introduction of an API in a browser preview should not be confused with a guarantee of universal browser support or a finalized standard implementation.
5. Safari 27.1 Supports a Wide Range of Viewport Sizes
The iPhone Duo has two displays: an outer screen that remains available when the device is closed and a larger inner screen that becomes available when it is opened.
Both displays support portrait and landscape orientations. The browser's interface also changes depending on which display is being used.
On the outer display, Safari places its tab bar at the bottom by default. On the inner display, the tab bar appears at the top, more like the arrangement on an iPad or Mac.
When the inner display is used in landscape orientation, users can also position two windows side by side. Each window receives a narrower viewport than the full display.
According to WebKit, Safari 27.1's viewport dimensions span approximately 382 to 951 CSS pixels in width and 368 to 902 CSS pixels in height, depending on the display configuration and window arrangement.
| Display configuration | Viewport width | Large viewport height |
|---|---|---|
| Outer display, portrait | 382 CSS px | 618 CSS px |
| Outer display, landscape | 594 CSS px | 406 CSS px |
| Inner display, portrait, one tab | 669 CSS px | 902 CSS px |
| Inner display, landscape, one tab | 951 CSS px | 620 CSS px |
| Two side-by-side windows | 385 CSS px per window | 609 CSS px |
These measurements demonstrate why developers should not assume that a foldable device will always provide a wide viewport simply because its inner screen is large. Split-window multitasking can give an individual web application a viewport almost as narrow as the outer display.
The figures also show why responsive design remains essential: the same website may need to support very different layout constraints depending on whether the user is browsing on the outer screen, using the unfolded display, or multitasking.
Source: WebKit — Safari 27.1 viewport dimensions.
6. Apple Is Investigating Ways to Extend Web Content Behind Safari's Controls
Another important part of Apple's WebKit announcement concerns a limitation on the iPhone Duo's outer display.
Because the outer screen is relatively wide and short, iOS places Safari's controls along the right-hand side to preserve vertical space for websites.
Safari currently keeps the page content out of the region occupied by those controls. It extends the website's background color into that region, but does not let the main web content occupy the entire available display.
This can create an unusual layout in which a website appears constrained to a narrower area even though the physical screen extends farther to the right.
Apple acknowledges the limitation and says it is investigating ways to give web developers more control over the space.
For example, a developer might want a website's header background to extend across the entire screen while keeping the text and interactive controls clear of Safari's interface.
However, simply allowing webpages to render behind the browser controls could obscure important content on websites that do not correctly account for all screen edges.
One possible approach involves the HTML viewport meta tag with viewport-fit="cover", alongside CSS environment variables that help content avoid system-controlled areas. Apple notes that many existing websites do not correctly handle all four edges, making a simple implementation potentially problematic.
The company is therefore investigating whether a more robust and developer-friendly mechanism could achieve the same outcome.
No final API or release timeline has been announced for this proposed change. It should be treated as an area of ongoing investigation rather than a capability that developers can already rely on.
Source: 9to5Mac — Apple explores a fix for Safari's outer-display layout.
7. What Web Developers Should Do Now
The new Safari capabilities create opportunities for better foldable experiences, but developers do not necessarily need to rebuild their websites specifically for the iPhone Duo.
WebKit emphasizes that Safari continues to use the same WebKit engine and web technologies as other iPhones. Existing websites and web applications should continue to function, and modern responsive layouts provide a strong starting point.
Developers should prioritize the following areas.
Review responsive layouts
Use CSS Grid, Flexbox, fluid sizing, and responsive media queries to make sure the interface works across a broad range of viewport dimensions.
Avoid relying on a single hardcoded screen width or assuming that portrait orientation always means a narrow viewport.
Use feature detection instead of device identification
Rather than identifying the iPhone Duo by its user-agent string, developers should detect available capabilities and adapt only when the relevant features are supported.
This reduces the need for device-specific exceptions and helps keep the application compatible with future devices.
Test multitasking configurations
Test the website or web application on the outer display, the unfolded inner display, and narrow split-window configurations.
Interfaces that work well across the full inner display may still struggle when a window is reduced to approximately 385 CSS pixels wide.
Experiment with fold-aware layouts
Developers can enable the preview APIs and test interfaces that respond to the device's posture and viewport segments.
Potential use cases include document readers, comparison tools, dashboards, collaborative applications, and web-based productivity software.
These are particularly promising areas because their interfaces may benefit from separating content across the two sides of a fold.
Use the iPhone Duo simulator
WebKit states that developers do not need to own the physical device to start testing. Xcode 27.1 or later includes Device Hub, where developers can create and use an iPhone Duo simulator to evaluate how their websites and web applications respond to different configurations.
This provides a practical starting point for identifying layout problems before testing on actual hardware.
8. Why This Matters for the Future of the Web
The significance of Safari 27.1 extends beyond PDF viewing.
Foldable devices introduce a different relationship between software and hardware. The browser must account not only for the available viewport but also for how that viewport is divided and how the device's posture changes during use.
The Device Posture API and Viewport Segments API provide building blocks for responsive interfaces that understand those differences.
They could eventually enable richer document-reading experiences, side-by-side comparisons, more adaptive dashboards, and web applications that rearrange controls according to the device's physical configuration.
At the same time, Apple's decision to introduce the APIs as previews reflects the complexity of changing web standards. Developers need ways to experiment with foldable-aware layouts without fragmenting the web into entirely separate experiences for individual devices.
Apple's investigation into extending content behind Safari's controls also reveals a broader design challenge: giving developers access to more screen space while preserving readability, accessibility, and safe interaction with browser controls.
The next stage will depend on feedback from developers and the evolution of the preview APIs. Apple has not committed to a date for making these capabilities generally available or for resolving the outer-display content limitation.
Conclusion
Safari 27.1 introduces a new set of foldable-aware capabilities for Apple's iPhone Duo, starting with automatic two-page PDF viewing when the device is partially folded.
For developers, the more significant changes are the preview versions of the Device Posture API and Viewport Segments API. These tools make it possible to detect the device's posture, identify separate display regions, and build layouts that respond to the fold rather than merely adjusting to screen dimensions.
However, the APIs remain experimental behind feature flags, and Apple's proposed approach to using the area behind Safari's outer-display controls is still under investigation.
For now, developers should focus on robust responsive layouts, feature detection, and testing across different viewport configurations. Those practices provide the best foundation for foldable-aware websites that remain useful across Apple's existing devices and the wider web.
Top comments (0)