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.
