Skip to main content

How one developer got around the iPhone X's website letterboxing

If you like to view websites in landscape mode on your iPhone and are planning on getting the iPhone X, you might notice some white bars pop up on the sides of your device when you're surfing the web on that phone in a couple of months. One developer has found a solution that other developers can use to keep their websites from showing these bars when visitors head to their sites.

From Stephen Radford:

The new iPhone X features a beautiful edge-to-edge display. Well, almost. There is the small issue of a notch at the top of the browser which doesn't cause an issue when viewing websites in portrait but by default does cause some issues in landscape.To accommodate the notch iOS 11 constrains websites within a "safe area" on the screen. On most websites this results in letterboxing on the left and the right.Thankfully there are two simple fixes that can be made to solve this letterboxing.

Radford suggests using background-color to force the bars to adopt the same color as your site if it uses a single solid color, rather than a gradient. If you use an image, gradient, or different colors across your site, you can use the new-to-iOS viewport-fit descriptor to have your site fill the whole screen of the iPhone X.

Developers will need to implement these solutions on their own, of course. We'll have to wait until the launch of the iPhone X in early November to see if anyone has utilized Radford's techniques.

Joseph Keller is the former Editor in Chief of iMore. An Apple user for almost 20 years, he spends his time learning the ins and outs of iOS and macOS, always finding ways of getting the most out of his iPhone, iPad, Apple Watch, and Mac.

12 Comments
  • I am glad someone is thinking ahead and coming up with suggestions for mobile web pages. Perhaps Apple should be alerting devs and others on this so its more uniform. Sort of how Apple always bashed Android for inconsistent screen sizes, and resolution, well now they have their own issue to deal with. I will still be ordering an iPhone X 256GB color is not key (prefer black) but will take silver/white.
  • We accept that in order for 'perfect' industrial design, you have to compromise on things like a perfect display area, perfect method for going to home screen, perfect method for unlocking phone. We understand, do what's best for your concept, we'll rationalize the rest as good design decisions.
  • This is probably my one issue with the phone. In portrait it doesn't bother me but every demo video I see with he phone in landscape for anything, especially games and video playback I just want to gouge my eyeballs out. All I ask is for Apple to just black the "horns" out in landscape.
  • agreed. i don't know that i want to spend NZ$2,099.00 (GST inclusive) and have this annoy the crap out of me everyday. Also, the amount of indicators at the top of my iPhone 6 wont fit on the X - 5 dots (signal strength), carriers name (8 chars), wifi indicator, time, dnd, location service indicator, alarm indicator, battery % and battery symbol.
    i dont really need to upgrade yet, as the 6 is fine apart from a dodgy lightning port caused by tripping on the cable violently removing it. I'll go to the 8 i suppose.
    Annoying that the better camera isnt on the smaller phone as i really dont like the bigger plus phone and shouldn't have to buy that just to get the better camera.
    anyway, first world issue i guess 😎
  • I'm in the same camp, for me I'll be coming from the 6s Plus but I want small now.
  • As long as blacking out is optional, I like using as much screen space as possible, rather than having a black bar, but I can understand some people would prefer it the way you want it
  • I thought that tapping the screen would compress the video into a normal viewing area and have black 'horns' as you call them.
  • Does repeating edge-to-edge a million times actually make it edge-to-edge?
  • It's as edge-to-edge as comfortably possible
  • Yet if this was an android device Rene would have been all over it. Surprised we haven't heard anything about it not being symmetrical...
  • There's a difference between things not being symmetrical and things being completely out of alignment. And no, Rene wouldn't have been all over it
  • Ditto! You mean they couldn't design this phone by placing the full display under that darn cut out? Nothing futuristic about that on such an otherwise fine piece of hardware.