iPhone Duo external display: Apple tweaks Safari to unlock more screen power

Apple has recognized that Safari’s presentation on the external display of the iPhone Duo is leaving some users dissatisfied: the browser doesn’t make use of the full available width. On this Duo model, which is wider and not as tall as a standard iPhone, a right-hand column is dedicated to system controls that would normally appear at the top or bottom of the screen. In a post on the WebKit blog, Safari’s development team explains that, for now, the browser simply stretches the background color of the webpage to fill that extra area, but the team plans to provide developers with ways to take advantage of the space in upcoming OS releases. No precise timeline has been announced yet.

Apple says it aims to enable developers to utilize this additional area. “For instance, you might want your header’s background to span the full width of the display. Although there may appear to be a single obvious method to do that, there are actually multiple possibilities.” The company is still deciding on the best route to follow, and—unusually—has called on developers to share their suggestions:

One option would be to rely on the HTML meta viewport tag with the attribute viewport-fit=”cover” to allow the webpage to extend into that space, and expect developers to use the appropriate environment variables to keep important content away from system control elements. However, when we inspect current site designs we find many projects do not correctly apply padding on all four sides. Because of this, we’re looking for a more robust solution — one that’s perhaps simpler for you to implement. If you have ideas, we’d love to hear them.