Apple Wants to Fix Safari's Cramped Layout on iPhone Duo
By Nikhil Raghavan · Reporting from San Francisco ·
Apple is seeking a way to fix Safari's cramped outer display on the iPhone Duo, but asking developers to solve a hardware-driven viewport crisis is a mistake.
Apple shipped a $1,999 device without a viable web specification for its most basic interaction. By moving Safari controls to the side of the iPhone Duo's outer display, Apple created a viewport crisis that it now expects the developer community to solve. This is a classic case of a product being sellable but not shippable. Apple is not fighting a technical limitation of the web; it is fighting a design choice that ignores how the web actually renders.
The math of a cramped viewport
The iPhone Duo's outer display is 5.4 inches. To save vertical space, Apple moved the Safari controls to the right side of the screen. This decision sounds logical in a slide deck, but it fails in the browser. According to Digital Trends, web pages on this display are approximately 382 CSS pixels wide in portrait mode.
The controls occupy a significant portion of the screen. They narrow the area available for content. Chance Miller noted that the web simply isn't optimized for this form factor. He observed that scrolling in Safari is better on the inner screen. In Safari 27.1, web content does not extend to fill the space behind these controls. Only the background color fills the gap.
When a layout fails like this, someone gets paged. Usually, it is the front-end engineer who has to figure out why a site looks broken on a new device. In this case, Apple is the one who broke the spec. They created a hardware posture that the current WebKit implementation cannot handle.
The failure of the cover fix
Jen Simmons of WebKit recently detailed explorations to fix this in a blog post. Apple wants to give developers the ability to use that side space in creative ways. For example, a designer might want a header background to span the full width.
The current tool for this is the HTML viewport meta tag with viewport-fit="cover". This is the same mechanism Apple used during the iPhone X rollout in 2017 to handle the notch. But viewport-fit="cover" is a blunt instrument. If a website does not properly account for the safe areas, the Safari controls will obscure important content.
Jen Simmons admitted that many sites do not leave safe margins on every edge. She is now investigating an alternative. This is an admission that the current tool is insufficient. Apple is asking for ideas from developers because they lack a foolproof implementation. This mirrors the shift to the iPhone 5 in 2012, which forced a total rethink of vertical layouts.
The strongest case for Apple's current design is that it avoids overlapping controls with content. Chance Miller suggested that overlapping would not make sense. If the controls sat on top of the page, they would block text and buttons. By pushing the content to the side, Apple ensures the controls never hide the site.
This argument is a distraction. It prioritizes the visibility of the browser's UI over the visibility of the actual website. A browser is a window, not the view. If the window is so narrow that the content becomes unusable, the design has failed.
A pattern of foldable friction
Apple is not the first to struggle with this. The Samsung Galaxy Fold shares the exact same mechanism of managing UI transitions between a small cover display and a large internal display. Samsung had to learn how to hand off a session from a narrow outer screen to a tablet-sized interior.
Apple is attempting a similar transition. Safari 27.1 adds a feature where PDFs show two pages side by side when the Duo is held partially folded. When the device is flat or closed, it reverts to one page. This is a functional win, but it does not solve the fundamental viewport problem on the outer screen.
The need for a specific iPhone Duo optimization is not new. The first iPad in 2010 required a new set of viewport standards to move from mobile to tablet layouts. The difference here is that Apple is trying to squeeze a mobile experience into a non-standard sliver of glass.
MacStories reported that they updated their website for iPhone Duo viewport sizes. Even then, they cannot extend the toolbar or other elements under the Safari controls. The hardware is dictating a broken software experience.
Apple cannot "explore" its way out of a bad spec. The company cannot ask developers to guess how to handle a proprietary layout using generic HTML tags. The fix is not a "creative" use of space. The fix is a technical standard that tells the browser exactly where the safe zones are without breaking the rest of the page.
Apple will likely ship a proprietary WebKit CSS property in an iOS 27.x release to let backgrounds bleed behind the controls. This is the only way to avoid a global layout failure. Until then, the iPhone Duo remains a luxury device with a budget web experience. Apple sold the hardware before they wrote the spec, and now the developers are paying the price in latency and broken layouts.
Sources
- 9to5Mac: Apple exploring fix for Safari’s cramped layout on the iPhone Duo’s outer display
- MacRumors: Apple Wants to Fix Safari's Cramped Layout on iPhone Duo
- Digital Trends: Apple is exploring ways to make Safari websites less cramped on its foldable iPhone
- Gizchina.com: Apple Is Working on a Fix for Safari’s Crowded Interface on the Foldable iPhone Duo
- MacStories: Apple Investigating Options for Extending Web Content Under iPhone Duo’s Safari Controls