Safari 27.1 & iPhone Duo: Adapting Web Experiences

The Core Update

The update's primary developer relevance lies in two new API previews. The Device Posture API is now available. So is the Viewport Segments API. Both APIs are currently accessible behind feature flags. For users, Safari 27.1 introduces automatic two-page PDF display. This occurs when an iPhone Duo is partially folded. The view reverts to single page when flat or fully closed.

The iPhone Duo presents new viewport dimensions. Widths range from 382 to 951 CSS pixels. Heights span 368 to 902 CSS pixels.

Official Source: Apple Announcement

Technical Impact & Mechanism

The new APIs address these complexities directly. The Device Posture API allows detecting the device's physical state. Developers can query if the device is folded or flat. This opens possibilities for context-aware UI adjustments. For example, adapting content flow based on the hinge's presence.

The Viewport Segments API offers granular control. It exposes information about distinct screen segments. A device folded in half could present two separate segments. This API helps distribute content intelligently across these physical divisions. Imagine an article spanning two logical halves of a folded screen. These APIs move beyond basic media queries.

Here’s a conceptual look at how you might interact:

// Conceptual Device Posture API interaction
// Actual API syntax is subject to change as it's a preview.
if (navigator.userAgentData && navigator.userAgentData.getDevicePosture) {
  navigator.userAgentData.getDevicePosture().then(posture => {
    if (posture.type === 'folded') {
      console.log('Device is folded. Adjusting UI for dual screen.');
      // Example: Apply a CSS class or modify DOM elements
      document.body.classList.add('device-folded');
    } else {
      console.log('Device is flat. Standard UI.');
      document.body.classList.remove('device-folded');
    }
  });
} else {
  console.log('Device Posture API not supported or behind flags.');
}

/* Conceptual CSS for Viewport Segments */
/* The exact CSS environment variables or media features might evolve. */
/* This illustrates the concept of segment-aware styling. */
/*
@media (horizontal-viewport-segments: 2) {
  .main-content {
    display: grid;
    grid-template-columns: calc(env(viewport-segment-width 0) - 12px) 12px calc(env(viewport-segment-width 1) - 12px);
    gap: 24px; // Account for hinge area
  }
  .left-pane {
    grid-column: 1;
  }
  .right-pane {
    grid-column: 3;
  }
}
*/

These APIs enable building truly adaptive web experiences. Your application can now react to the physical form factor, not just pixel dimensions.

Action Plan for Developers & Businesses

1. Validate Existing Responsiveness: Confirm your current responsive layouts work across the iPhone Duo's new viewport ranges (382-951px width, 368-902px height). Focus on how content reflows.
2. Monitor API Standards: Keep track of the Device Posture and Viewport Segments API specifications. These will mature and standardize.
3. Experiment with Flags: If specific foldable UX is a business priority, enable feature flags. Begin prototyping specialized experiences for folded states or segmented displays.
4. Rethink Foldable UX: Consider how your application's content might best utilize a folded screen. Identify opportunities for split views or ambient information displays.

Muhammad Waleed Raza