Apple exploring fix for cramped Safari layout on iPhone Duo's outer screen

In a new post on the WebKit blog highlighting what’s new in Safari 27.1, Apple’s Jen Simmons said the company is exploring ways to let websites better use the iPhone Duo’s external display. Here are the details.

Apple knows Safari isn’t making full use of the iPhone Duo’s exterior screen

One issue highlighted in several iPhone Duo reviews (including ours) was the fact that Safari’s right-aligned controls take up a significant portion of the limited outer screen real estate, leaving websites with an unusually narrow area to display their content.

Here’s what Chance Miller had to say about it in his review posted earlier this week:

But the clunkiness of the iPhone’s 5.4-inch exterior screen shows up in Safari. The web is simply not optimized for this form factor. I’ll talk about this later, but the right-aligned controls on the iPhone Duo especially eat into usable screen real estate in Safari.
(…)
I can understand why Apple chose the design it did for Safari on the iPhone Duo. I don’t think overlapping the controls with the website would have made sense. Still, scrolling in Safari is one of the best examples of something better on the inner screen.

For new iPhone Duo users who have also been frustrated by this issue, Apple’s Jen Simmons shared some good news today.

In a post highlighting what’s new in Safari 27.1, including how websites adapt to the iPhone Duo’s different screen sizes and folding positions, Simmons acknowledged that websites currently can’t extend behind the controls on the device’s exterior screen, and said Apple is exploring ways to address this limitation.

Excerpt from his message:

We would like to give web designers and developers the opportunity to design and use this space more creatively. Maybe you want to extend your header background to the full width of the screen, for example. It may seem like there is only one obvious way to make this possible, but in reality there are many possibilities.

Simmons then explained that by simply using the HTML window meta tag with viewport-fit="cover" Extending websites behind Safari’s controls could cause problems, as many websites don’t properly account for these areas, potentially leaving important content obscured.

Instead, she invited developers to share their ideas as Apple explores a better approach:

We are investigating if there is a better way to achieve the same result, something more foolproof and perhaps easier to use. If you have any ideas, we’d love to hear them. And stay tuned.

If you are a web developer and have ideas on how Apple could address this limitation, you can read the full WebKit article for more details on how to share your feedback.